Shulou(Shulou.com)06/01 Report--

This article mainly shows you "jQuery how to deal with elements and browser window size", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "jQuery how to deal with elements and browser window size" this article.

JQuery-Dimension

With jQuery, it is easy to manipulate the dimensions of elements and browser windows. JQuery provides several important ways to handle dimensions:

The width () method sets or returns the width of the element (excluding inner, border, or outer margins).

The height () method sets or returns the height of the element (excluding inner, border, or outer margins).

The innerWidth () method returns the width of the element (including the inner margin).

The innerHeight () method returns the height of the element (including the inner margin).

The outerWidth () method returns the width of the element (including inner margins and borders).

The outerHeight () method returns the height of the element (including the inner margin and border).

The outerWidth (true) method returns the width of the element (including inner, border, and outer margins).

The outerHeight (true) method returns the height of the element (including the inner margin, border, and outer margin).

JQuery width () and height () methods

The width () method sets or returns the width of the element (excluding inner, border, or outer margins).

The height () method sets or returns the height of the element (excluding inner, border, or outer margins).

The following example returns the width and height of the specified element:

$("button") .click (function () {var txt= "; txt+=" Width: "+ $(" # div1 "). Width () +"; txt+= "Height:" + $("# div1"). Height (); $("# div1") .html (txt);})

JQuery innerWidth () and innerHeight () methods

The innerWidth () method returns the width of the element (including the inner margin).

The innerHeight () method returns the height of the element (including the inner margin).

The following example returns the inner-width/height of the specified element:

$("button") .click (function () {var txt= "; txt+=" Inner width: "+ $(" # div1 "). InnerWidth () +"; txt+= "Inner height:" + $("# div1"). InnerHeight (); $("# div1") .html (txt);})

JQuery outerWidth () and outerHeight () methods

The outerWidth () method returns the width of the element (including inner margins and borders).

The outerHeight () method returns the height of the element (including the inner margin and border).

The following example returns the outer-width/height of the specified element:

$("button") .click (function () {var txt= "; txt+=" Outer width: "+ $(" # div1 "). OuterWidth () +"; txt+= "Outer height:" + $("# div1"). OuterHeight (); $("# div1") .html (txt);})

The outerWidth (true) method returns the width of the element (including inner, border, and outer margins).

The outerHeight (true) method returns the height of the element (including the inner margin, border, and outer margin).

("button") .click (function () {var txt= "; txt+=" Outer width (+ margin): "+ $(" # div1 ") .outerWidth (true) +"; txt+= "Outer height (+ margin):" + $("# div1") .outerHeight (true); $("# div1") .html (txt);})

Example: jQuery handles element size

$(document) .ready (function () {$("button") .click (function () {var txt= "); txt+=" Width of div: "+ $(" # div1 "). Width () +"; txt+= "Height of div:" + $("# div1"). Height () + "; txt+=" Inner width of div: "+ $(" # div1 "). InnerWidth () +" Txt+= "Inner height of div:" + $("# div1"). InnerHeight () + "; txt+=" Outer width of div: "+ $(" # div1 "). OuterWidth () +"; txt+=" Outer height of div: "+ $(" # div1 "). OuterHeight () +"; txt+= "Outer width of div (+ margin):" + $("# div1") .outerWidth (true) + "" Txt+= "Outer height of div (+ margin):" + $("# div1") .outerHeight (true) + "; $(" # div1 ") .html (txt);});})

Displays the size of the div

Width ()-returns the width of the element.

Height ()-returns the height of the element.

InnerWidth ()-returns the width of the element (including the inner margin).

InnerHeight ()-returns the height of the element (including the inner margin).

OuterWidth ()-returns the width of the element (including inner margins and borders).

OuterHeight ()-returns the height of the element (including inner margins and borders).

OuterWidth (true)-returns the width of the element (including inner, border, and outer margins).

OuterHeight (true)-returns the height of the element (including inner, border, and outer margins).

JQuery-more width () and height ()

The following example returns the width and height of the document (HTML document) and window (browser viewport):

$(document) .ready (function () {$("button") .click (function () {var txt= "); txt+=" Document width/height: "+ $(document). Width (); txt+=" x "+ $(document). Height () +"\ n "; txt+=" Window width/height: "+ $(window). Width (); txt+=" x "+ $(window). Height (); alert (txt) }); display the size of the document and window

The following example sets the width and height of the specified element:

$(document) .ready (function () {$("button") .click (function () {$("# div1"). Width (320) .height (320);})

Resize div above is all the content of the article "how jQuery handles elements and browser window sizes". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.