jQuery 元素信息
先贴出元素模型信息
1.获取内容区大小
- css()：返回值是带单位的（getComputedStyle(node).width）
<script>
$(function(){
console.log($("div").css("width")) //200px
console.log($("div").css("height")) //200px
})
</script>
- width() / height()：返回值不带单位
<script>
$(function(){
console.log($("div").width()) //200
console.log($("div").height()) //200
})
</script>
2.获取内容区+内边距大小
- innerWidth()/innerHeight()：返回的元素 内容区+内边距 的大小，不带单位
<script>
$(function(){
console.log($("div").innerWidth()) //240
console.log($("div").innerHeight()) //240
})
</script>
3.获取内容区+内边距+边框大小
- outerWidth()/outerHeight()：返回的元素 内容区+内边距+边框 的大小，不带单位
<script>
$(function(){
console.log($("div").outerWidth()) //260
console.log($("div").outerHeight()) //260
})
</script>
- 如果传入参数true,则返回结果中追加 外边距 的大小，即（内容区+内边距+边框+外边距）
<script>
$(function(){
console.log($("div").outerWidth(true)) //646
console.log($("div").outerHeight(true)) //300
})
</script>
4.元素的位置信息
- position()：返回元素相对于父级定位元素的距离信息，返回值数据格式是对象
- 注意：查找最近的父级定位元素，如果没有，则以body标签为准
<body>
<div id="box">定位父元素
<div class="item">非定位元素
<div class="child">当前元素</div>
</div>
</div>
</body>
<script>
$(function(){
console.log($(".child").position())
//{top: 87, left: 120}
})
</script>
- offset()：返回当前元素相对于document顶部的绝对距离信息，返回值数据格式是对象（如果body有滚动条，要加上被body滚动条隐藏的距离）
<script>
$(function(){
console.log($(".child").offset()) //{top: 157, left: 283}
})
</script>
- scrollLeft()/scrollTop()：获取或设置滚动距离（当前元素必须有滚动条）
//获取被滚动条卷去的宽度和高度
$('.box').scrollLeft();
$('.box').scrollTop();
//设置滚动条位置（页面回到顶部）
$(window).scrollLeft(0);
$(window).scrollTop(0);
5.获取同级元素索引值
- index()：返回当前元素在其兄弟元素中的索引值
<div class="box">
<p>1</p>
<div class="item">2</div>
<p>3</p>
</div>
console.log($('.item').index()); //1
