肉渣教程

jQuery 尺寸

上一节 下一节

阅读本节前,请先回忆一下《CSS Box模式》《CSS Box-sizing》这两节。

jQuery尺寸相关方法

jQuery中与尺寸相关的常用方法如下:

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

回忆一下HTML元素的Box模式

如下所示,如果用Box的视角去看一个HTML元素,则包括四部分,margins(外边距)borders(边框)padding(内边距)content(实际内容)

Margin(外边距)
Border(边框)
Padding(内边距)
Content(实际内容)




jQuery尺寸相关方法则如下对应:


box-sizing取值border-box时CSS中的width和height属性会把padding内边距、border边框也包括进来,但是jQuery的width()和height()方法依旧如上,不会把padding和border包括进来。


width() 和 height() 方法

jQuery中的width()方法可以获取或设置元素的宽度;height()方法可以获取或设置元素的高度。jQuery中的width()和height()方法所涉及到的宽度和高度如上图所示,特指content实际内容部分(不包括padding内边距和border边框)

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

运行一下

innerWidth() 和 innerHeight() 方法

jQuery中的innerWidth()方法可以获取元素的宽度(包括padding内边距部分);innerHeight()方法可以获取元素的高度(包括padding内边距部分)

$("button").click(function(){
    var txt = "";
    txt += "宽度innerWidth:" + $("#div1").innerWidth() + "px</br>";
    txt += "高度innerHeight:" + $("#div1").innerHeight() + "px";
    $("#div1").html(txt);
});

运行一下

outerWidth() 和 outerHeight() 方法

jQuery中的outerWidth()方法可以获取元素的宽度(包括padding内边距和border边框部分);outerHeight()方法可以获取元素的高度(包括padding内边距和border边框部分)

$("button").click(function(){
    var txt = "";
    txt += "宽度outerWidth:" + $("#div1").outerWidth() + "px</br>";
    txt += "高度outerHeight:" + $("#div1").outerHeight() + "px";
    $("#div1").html(txt);
});

运行一下


如果想把margin部分也包括进来呢?把true参数传进去即ok啦~
jQuery中的outerWidth(true)方法可以获取元素的宽度(包括padding内边距、border边框部分和margin外边距部分);outerHeight(true)方法可以获取元素的高度(包括padding内边距、border边框部分和margin外边距部分)

$("button").click(function(){
    var txt = "";
    txt += "宽度outerWidth:" + $("#div1").outerWidth(true) + "px</br>";
    txt += "高度outerHeight:" + $("#div1").outerHeight(true) + "px";
    $("#div1").html(txt);
});

运行一下

width()和height()方法来设置元素高宽

jQuery中的width()和height()方法还可以设置元素宽度和高度,其设置的是content实际内容部分的宽度和高度,如本小节上方的示意图所示。因此,jQuery中上述两种方法设置的并不一定是元素的CSS中的width属性和height属性。

$("#div1").width(500);
$("#div1").height(250);

运行一下


把所有HTML元素的box-sizing属性取值border-box是一种更为推荐的实践方式,因为在CSS样式表中能更直观精准地定义元素高度和宽度。而上述jQuery原生的width()方法和height()方法似乎不是最佳的选择,因此,这里并不推荐直接使用width()方法和height()来设置元素宽度和高度。

而是推荐通过jQuery直接操作元素CSS样式表中的width属性和height属性,jQuery设置元素宽度高度的最佳实践方式如下所示:

$("#div1").css("width", "500px");
$("#div1").css("height", "250px");

运行一下

获取document和window的高宽

jQuery可用上述方式width()方法和height()方法分别获取document(HTML文档)和window(浏览器视窗)的高度和宽度。

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

运行一下


jQuery 尺寸

上一节 下一节