这边博客详细的讲述一下JQuery中关于盒子模型的一些方法
offset([coordinates])方法
获取匹配元素在当前适口的相对偏移
返回的对象包含两个模型属性:top和left 以像素计。此方法只对可见元素有效。
参数
coordinates{top,left}
示例代码
<html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; padding: 0px; } </style> <script src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p>hello<p id="offp">world</p></p> <script> var p = $("#offp"); var offset = p.offset(); //获取距左距右的距离 p.html("left:" + offset.left + ",top:" + offset.top); //设置这个p的距左距右距离 p.offset({left:100,top:50}); </script> </body> </html>
结果
position()方法
获取匹配元素相对父元素的偏移
返回的对象包含两个属性，top和left，为精确计算结果，请在补白，边框和填充属性上使用像素单位，只对可见元素有效
代码:
//获取第一个p元素
var firstP = $("p:first");
//获取第一个元素相对于父元素的位置
var pos = firstP.position();
firstP.text("left:" + pos.left + "top:" + pos.top);
效果
scrollTop([val])方法
获取匹配元素相对于滚动条顶部的偏移
此方法对可见和隐藏元素均有效
参数：
val: string，Number
示例：
<html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 10px; } </style> <script src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p>Hello<p id="scrollP">world</p></p> <script> var p = $("p:first"); //设置相对偏移 p.scrollTop(200); $("#scrollP").text("scrollTop :" + p.scrollTop() + " scrollLeft: " + p.scrollLeft()); </script> </body> </html>
height([val|fn])方法
获取匹配元素当前计算的高度值(px) 在JQuery1.2以后 可以用来获取window和document的高
参数
val : String Number Function
设定CSS中 height的值可以是字符串或者数字 还可以是一个函数，返回要设置的数值，第一个参数是元素在原先集合中的索引位置，第二个参数是原来的高度。
示例代码
var p = $("p:first"); //获取p元素当前的高度 $("body").append("<p>" + p.height() + "</p>") //显示18
还可以用这个方法给元素设置高度
var p = $("p:first");
//设置高度
p.height(100);
以10像素的幅度增加p元素的高度
$("#pBtn").click(function() {
$("p:first").height(function(index,oldValue){
return oldValue + 10;
});
});
width([val|fn])方法
取得匹配元素当前计算的宽度值(px)
在JQuery1.2以后可以用来获取window和document的宽度
参数
val：String Number Function
关于参数用法和height()方法一样。
示例：
//获取宽度
$("p:first").width();
//设置匹配元素的宽度
$("p:first").width(100);
//以10元素的幅度增加p元素的宽度
$("#pBtn").click(function() {
$("p:first").width(function(index,oldValue){
return oldValue +10;
});
});
innerWidth() 和 innerHeight()方法
获取匹配元素的内部区域高度（包括补白(内边距) 不包括边框）
此方法对可见元素和隐藏元素均有效
<html> <head> <meta charset="UTF-8"> <title></title> <style> p { padding: 10px; } </style> <script src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p>hello<p id="innerP">world</p></p> <script> $("#innerP").text("innerWidth :" + $("p:first").innerWidth() + "innerHeight" + $("p:first").innerHeight()) </script> </body> </html>
outerHeight([options]) 和 outerWidth([options])方法
获取匹配元素的外部高度(默认包括补白和边框)
此方法对可见和隐藏元素均有效
参数
options Boolean(默认值false) 设置为true时 计算边距在内
示例代码
<html> <head> <meta charset="UTF-8"> <title></title> <style> p { /*padding: 10px;*/ } </style> <script src="../js/jquery-2.1.1.min.js"></script> </head> <body> <p>hello<p id="innerP">world</p></p> <div></div> <script> $("#innerP").text("innerWidth :" + $("p:first").innerWidth() + "innerHeight" + $("p:first").innerHeight()) $("div").text("outerWidth :" + $("p:first").outerWidth() + "outerHeight" + $("p:first").outerHeight()); </script> </body> </html>
以上就是JQuery中对于盒子模型的一些操作。