WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery - Dimensions


With jQuery, it is anything but difficult to work with the elements of components and program window.


jQuery Dimension Methods

jQuery has a few essential techniques for working with dimensions:

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

jQuery Dimensions


jQuery width() and tallness() Methods

The width() strategy sets or returns the width of a component (avoids cushioning, fringe and margin).

The stature() strategy sets or returns the tallness of a component (prohibits cushioning, fringe also, margin).

The following precedent returns the width and tallness of a predetermined <div> element:

Example

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

jQuery innerWidth() and innerHeight() Methods

The innerWidth() technique restores the width of a component (incorporates padding).

The innerHeight() strategy restores the tallness of a component (incorporates padding).

The following precedent returns the internal width/tallness of a predetermined <div> element:

Example

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

jQuery outerWidth() and outerHeight() Methods

The outerWidth() technique restores the width of a component (incorporates cushioning and border).

The outerHeight() technique restores the stature of a component (incorporates cushioning what's more, border).

The following model returns the external width/stature of a predetermined <div> element:

Example

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

The outerWidth(true) technique restores the width of a component (incorporates cushioning, fringe, and margin).

The outerHeight(true) technique restores the tallness of a component (incorporates cushioning, outskirt, and margin).

Example

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

jQuery More width() and height()

The following precedent returns the width and stature of the archive (the HTML record) and window (the program viewport):

Example

$("button").click(function(){
    var txt = "";
    txt += "Document width/tallness: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/tallness: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
});

The following precedent sets the width and tallness of a predetermined <div> element:

Example

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