获取、设置页面元素到顶部、左部距离、宽高元素卷入(scroll)部分
一、javascript部分
1. 获取元素节点的高度和宽度
1) offsetWidth // 获取元素节点宽度 包括元素宽度如果有滚动条包含滚动条所占的位置(实际元素宽度) 2) clientWidth // 获取元素节点的宽度 不包含滚动条所占的位置
3) scrollWidth // 获取元素节点的宽度 如果子集比他宽且设置为滚动则包含子集滚动卷入部分否则与offsetWidth相同
<body>
<div class="offset">
<div class="offD"></div>
<div class="offE"></div>
</div>
<script type="text/javascript">
var offset= document.getElementsByClassName('offset')[0];
offsetW=offset.offsetWidth; //202
offsetW2=offset.clientWidth; //183
offsetW3=offset.scrollWidth; //200
</script>
</body>
4) offsetHeight // 获取元素节点高度度 包括元素宽度如果有滚动条包含滚动条所占的位置(实际元素高度)
5) clientHeight // 获取元素节点的高度 不包含滚动条所占的位置
6) scrollHeight // 获取元素节点的高度 如果子集比他高且设置为滚动则包含子集滚动卷入部分否则与offsetHeight相同
2.获取元素到顶部和左部的距离
1) offsetLeft //获取元素左边线到浏览器可视部分的左部距离
2) offsetTop //获取元素顶边线到浏览器可视部分的顶部距离
<body>
<div class="offset">
<div class="offD"></div>
<div class="offE"></div>
</div>
<script type="text/javascript">
var offD= document.getElementsByClassName('offD')[0];
var offE= document.getElementsByClassName('offE')[0];
offDL=offD.offsetLeft; //109
offET=offE.offsetTop; //161
</script>
</body>
3.获取和设置元素左部和顶部卷入的距离
1) scrollLeft //设置和获取元素左部卷入的距离 ,设置直接赋值即可2) scrollTop //设置和获取元素顶部卷入的距离,设置直接赋值即可
<body>
<div class="offset">
<div class="offD"></div>
<div class="offE"></div>
</div>
<script type="text/javascript">
var offset= document.getElementsByClassName('offset')[0];
offset.scrollLeft=100; //设置左部卷入部分
offset.scrollTop=40; // 设置顶部卷入部分
console.log(offset.scrollLeft+'\n'+offset.scrollTop); //获取 : 100 40
</script>
</body>
二、jQuery部分
1.获取和设置元素宽高
1) $('#id).width(); //获取元素宽度; ()可以传入参数,当传入参数时为设置,参数不用带单位默认为PX2) $('#id).heigth(); //获取元素高度; ()可以传入参数,当传入参数时为设置,参数不用带单位默认为PX
2.获取元素到顶部和左部的距离
1) $('#id').offset(); //获取元素到顶部和左部的距离,返回的为一个包含【top和left】数组,分别为到顶部和左部的距离
2) $('#id').offset().top //获取元素到顶部的距离
3) $('#id').offset().left //获取元素到左部的距离
3.获取和设置元素左部和顶部卷入的距离
1) $('#id').scrollLeft() //获取元素左侧卷入宽度; ()可以传入参数,传入参数时为设置卷入,参数不用带单位默认为PX2) $('#id').scrollTop() //获取元素顶部卷入宽度; ()可以传入参数,传入参数时为设置卷入,参数不用带单位默认为PX