获取尺寸
如下:
heigh([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([soptions])
outerWidth([options])
下面就一一介绍(这里多说一下jquery中很多都是既可以返回匹配元素的值,又可以设置匹配元素值)
height()取得匹配元素当前计算的高度值(px)。
width()取得第一个匹配元素当前计算的宽度值(px)。
/此2个方法对可见和隐藏元素均有效。另外这个补白就是padding/
innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
/此2个方法对可见和隐藏元素均有效。另外这个补白就是margin(当outerheight()值为true时才会包括margin一会用例子说明)/
outerHeight([soptions]) 获取第一个匹配元素外部高度(包括补白和边框)。
outerWidth([options]) 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
下面是一个例子:
css代码块
<style type="text/css">
.div{
width: 150px;height: 120px; background-color: green; padding: 10px;border: 12px solid #009999;
margin: 20px
;
}
</style>
jquery代码块
$(function(){
console.log($(‘div‘).width()+‘+‘+$(‘div‘).innerWidth()+‘+‘+$(‘div‘).outerWidth());
var k = $(‘div‘).height()+‘+‘+ $(‘div‘).innerHeight()+‘+‘+$(‘div‘).outerHeight()+‘+‘+$(‘div‘).outerHeight(true) ;
alert(k);
})
html代码块
<body>
<div class="div"></div>
</body>
反馈回的结果为:
alert==>>120+140+164+204
console==>>150+170+194
从( k = (′div′).height()+′+′+(‘div’).innerHeight()+’+’+(′div′).outerHeight()+′+′+(‘div’).outerHeight(true))中我们可以得到:
$(‘div’).height()为120
$(‘div’).innerHeight()=120+padding(left,right)10+10=140
$(‘div’).outerHeight()=140+border(left,right)12+12=164
$(‘div’).outerHeight(true)=164+margin(left,right)20+20=204
所以这样我们就明白了get 元素 data的用法了
这个对于以width,innerwidth,outerwidth同样相同
接下来说下get获取scroll data元素滚动数据
首先看个例子
$(document).ready(function(){
$(document).click(function(){
alert($(window).scrollTop()) ;
})
});
<body>
<Span>span</Span>
<p>in pass</p>
<h1>p_h1</h1>
<p>dhgszfjzdggxdgxdgxfgxgxfdhdhcgdhchxcgcfftgcfgchcgghcgh</p>
</body>
运行之后点击就可以获得滚动的上下值了。
同样的这个方法和scrollLeft([val])用法一样
不过scrollLeft([val])是获取的左右值。
另外老话长谈jquery中很多或者说是大部分吧都是可以既能够获取元素值,又能够设置元素值
如我用scrollLeft([val])设置左右值:
$("div.demo").scrollLeft(300);
最后说下offset([coordinates])和position()
关于这两个方法我用一个例子来说明
如:
jquery代码块
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
/*window*/window.onload = function(){
var position_$ = function(){
$(function(){
var h2 = $(‘h2:last‘) ;
var position = h2.position() ;
$(‘h3‘).click(function(){
var k = position.left + ‘+‘ + position.top;
alert(k);
});
});
};
position_$();/*调用*/
(function(){
var h2 = $(‘h2:first‘);
var offset = h2.offset();
var k = offset.top + ‘+‘ + offset.left;
$(document).click(function(){
alert(k);
})
}()) /*调用*/
};/*window*/
</script>
html代码块
<body>
<h2>啊,好美的风景啊! </h2>
<h2>你好啊!大自然 </h2>
<h3>大自然:我很好! </h3>
</body>
返回来的结果是:
当点击h3 ==>>8+52.916628247070314
当点击h3或者任意地方(点击h3第二个才是我们所要的data)
==>>19.916671752929688+8
这样我们就明白其用法了
(大神勿喷啊!)
版权声明:本文为博主原创文章,未经博主允许不得转载。