1、offset()获取匹配元素在相对浏览器窗口的偏移量 返回一个对象，包括两个属性。left:相对浏览器窗口左边的距离。top:相对浏览器顶部的距离。
$("#div1").offset().left; //返回id为div1相对于浏览器窗口最左边的距离
$("#div1").offset().top; //返回id为div1相对于浏览器窗口最顶部的距离
1 function showDiv(obj) { 2 jQuery("#divShow").css("left", jQuery(obj).offset().left); //设置#divShow与浏览器的左距离为文本框距离浏览器左边的距离。 3 jQuery("#divShow").css("top", jQuery(obj).offset().top + jQuery(obj).outerHeight()); //设置#divShow距离顶部的距离为文本框距离顶部的距离加上自身高度。 4 jQuery("#divShow").show(); 5 } 6 7 <input type="text" value="ok" onclick="showDiv(this);" style="margin-left:100px;" /> 8 <div id="divShow" style="display:none;position:absolute;">2010-03-22</div>
2、position()获取匹配元素在相对父元素的偏移量，返回一个对象，包括两个属性。left:相对父元素最左边的距离。top:相对父元素最右边的距离。只对可见元素有效。
1 <head> 2 <title></title> 3 <script src="jquery-1.7.1.js" type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(function () { 6 $("#btn1").click(function () { 7 var left = $("#div2").position().left; //21.11111 8 var top = $("#div2").position().top; //33.33333 9 alert("距离父元素顶部的距离是：" + left + "; 距离父元素左边的距离是:" + top); 10 }) 11 }) 12 </script> 13 </head> 14 <body> 15 <div id="div1" style="200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; position:relative;"> 16 <div id="div2" style="100px;height:200px; background-color:Green; position:absolute; left:22px; top:34px;">我是一个div元素</div> 17 <input id="btn1" type="button" value="查看" /> 18 </div> 19 </body>
以上代码相当于javascript中的:
function fun1() {
var left = document.getElementById("div2").offsetLeft; //21
var top = document.getElementById("div2").offsetTop; //33
alert("距离父元素顶部的距离是：" + left + "; 距离父元素左边的距离是:" + top);
}
3、scrollTop() 获取匹配元素距离滚动条顶部的距离，说白了就是边框的最顶部与当前显示出来的最顶部的距离。
scrollTop(val) 设置匹配元素距离滚动条顶部的距离
该属性常常配合scroll()事件一起使用，能够实现元素随滚动条的滚动而滚动，类似于漂浮广告效果。
$(this).scroll(function(){
$("#div1").css("top", $(document).scrollTop()); //注意id为div1的div要设置为绝对定位。如果是底部漂浮，只需要$(document).scrollTop()加上相应的垂直距离就可以了。
})
4、scrollLeft() 获取匹配元素距离滚动条顶部的距离,说白了就是边框的最左边与当前显示出来的最左边的距离。
scrollLeft(val) 设置匹配元素距离滚动条顶部的距离
1 <head> 2 <title></title> 3 <script src="jquery-1.7.1.js" type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(function () { 6 $("#btn1").click(function () { 7 var scrollTop = $("#div1").scrollTop(); 8 var scrollLeft = $("#div1").scrollLeft(); 9 alert("显示的最顶部距离真正的顶部的距离是：" + scrollTop + "; 显示的最左边距离真正的左边的距离是:" + scrollLeft); 10 }) 11 }) 12 </script> 13 </head> 14 <body> 15 <div id="div1" style="200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; overflow:scroll;"> 16 <div style="400px;height:800px;/*撑出滚动条*/">我是一个div元素</div> 17 <input id="btn1" type="button" value="查看" /> 18 </div> 19 </body>
5、height() 获取匹配元素的高度值 //不包括padding,不包括边框 val可以是字符串"300px"、也可以是数字300，还可以是一个函数，返回值作为参数
height(val) 设置匹配元素的高度值
6、 width() 获取匹配元素的宽度值 //不包括padding,不包括边框
width(val) 设置匹配元素的宽度值
1 <head> 2 <title></title> 3 <script src="jquery-1.7.1.js" type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(function () { 6 $("#btn1").click(function () { 7 var Width = $("#div1").width(); //200 css的width属性，不包括内边距、边框和外边距 8 var Height = $("#div1").height(); //400 css的height属性，不包括内边距、边框和外边距 9 alert("div1的宽度是：" + Width + "; div1的高度是：" + Height); 10 }) 11 }) 12 </script> 13 </head> 14 <body> 15 <div id="div1" style="200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;"> 16 我是一个div元素 17 <input id="btn1" type="button" value="查看" /> 18 </div> 19 </body>
7、innerHeight() 获取匹配元素的高度值 //包括padding但不包括border
innerHenght(val) 设置匹配元素的高度值
8、innerWidth() 获取匹配元素的宽度值 //包括padding但不包括border
innerWidth(val) 设置匹配元素的宽度值
1 <head> 2 <title></title> 3 <script src="jquery-1.7.1.js" type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(function () { 6 $("#btn1").click(function () { 7 var innerWidth = $("#div1").innerWidth(); //240 包括边框和内边距 8 var innerHeight = $("#div1").innerHeight(); //440 包括边框和内边距 9 alert("div1的宽度是：" + innerWidth + "; div1的高度是：" + innerHeight); 10 }) 11 }) 12 </script> 13 </head> 14 <body> 15 <div id="div1" style="200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;"> 16 我是一个div元素 17 <input id="btn1" type="button" value="查看" /> 18 </div> 19 </body>
以上的主jQuery相当于代码(javascript版)：
function fun1() {
var innerWidth = document.getElementById("div1").clientWidth;
var innerHeight = document.getElementById("div1").clientHeight;
alert("div1的宽度是：" + innerWidth + "div1的高度是:" + innerHeight);
}
9、 outerHeight() 获取元素的高度值 //包括padding和border
outerHeight(val) 设置元素的高度值
还可以接受一个参数，该参数代表是否计算外边距，如果为true则表示计算外边距。
10、outerWidth() 获取匹配元素的宽度值 //(包括padding和border)
outerWidth() 设置匹配元素的宽度值
还可以接受一个参数，该参数代表是否计算外边距，如果为true则表示计算外边距。
1 <head> 2 <title></title> 3 <script src="jquery-1.7.1.js" type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(function () { 6 $("#btn1").click(function () { 7 var outerWidth = $("#div1").outerWidth(); //260包括边框和内边距 8 var outerHeight = $("#div1").outerHeight(); //460 包括边框和内边距 9 alert("div1的宽度是：" + outerWidth + "; div1的高度是：" + outerHeight); 10 11 var outerWidth1 = $("#div1").outerWidth(true); //320 包括边框、外边距和内边距(也就是元素实际占用的大小) 12 var outerHeight1 = $("#div1").outerHeight(true); //520 包括边框、外边距和内边距(也就是元素实际占用的大小) 13 alert("div1的宽度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1); 14 }) 15 }) 16 </script> 17 </head> 18 <body> 19 <div id="div1" style="200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;"> 20 我是一个div元素 21 <input id="btn1" type="button" value="查看" /> 22 </div> 23 </body>
在jQuery的参数不为真的情况下，以上jQuery的主代码相当于：
function fun1() {
var outerWidth = document.getElementById("div1").offsetWidth;
var outerHeight = document.getElementById("div1").offsetHeight;
alert("div1的宽度是：" + outerWidth + "; div1的高度是：" + outerHeight);
}
如果参数为真的情况下，就相当于javascript:
function fun1() {
var div1 = document.getElementById("div1");
var outerWidth1 = div1.offsetWidth + parseInt(div1.style.marginLeft) + parseInt(div1.style.marginRight);
var outerHeight1 = div1.offsetHeight + parseInt(div1.style.marginTop) + parseInt(div1.style.marginBottom);
alert("div1的宽度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1);
}