jQuery - Dimensions

---

With jQuery, it is slow to piece of job amongst the dimensions of elements together with browser window.

---

jQuery Dimension Methods

jQuery has several of import methods for working amongst dimensions:

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

---

jQuery Dimensions

---

jQuery width() together with height() Methods

The width() method sets or returns the width of an chemical component (excludes padding, edge together with margin).
The height() method sets or returns the meridian of an chemical component (excludes padding, edge together with margin).
The next instance returns the width together with meridian of a specified <div> element:

Example

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

---

jQuery innerWidth() together with innerHeight() Methods

The innerWidth() method returns the width of an chemical component (includes padding).
The innerHeight() method returns the meridian of an chemical component (includes padding).
The next instance returns the inner-width/height of a specified <div> element:

Example

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

---

jQuery outerWidth() together with outerHeight() Methods

The outerWidth() method returns the width of an chemical component (includes padding together with border).
The outerHeight() method returns the meridian of an chemical component (includes padding together with border).
The next instance returns the outer-width/height of a specified <div> element:

Example

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

The outerWidth(true) method returns the width of an chemical component (includes padding, border, together with margin).
The outerHeight(true) method returns the meridian of an chemical component (includes padding, border, together with margin).

Example

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

---

jQuery More width() together with height()

The next instance returns the width together with meridian of the document (the HTML document) together with window (the browser viewport):

Example

$("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);
});

The next instance sets the width together with meridian of a specified <div> element:

Example

$("button").click(function(){
    $("#div1").width(500).height(500);
});

---