javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分（scroll、scrollTop、scrollLeft、offset、offsetTop、offsetLeft）_jquery设置左侧距离

作者：小蓝xlanll | 2024-03-23 13:16:36

踩

jquery设置左侧距离

获取、设置页面元素到顶部、左部距离、宽高元素卷入（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(); //获取元素宽度; ()可以传入参数，当传入参数时为设置，参数不用带单位默认为PX
2) $('#id).heigth(); //获取元素高度; ()可以传入参数，当传入参数时为设置，参数不用带单位默认为PX

2.获取元素到顶部和左部的距离

1) $('#id').offset(); //获取元素到顶部和左部的距离，返回的为一个包含【top和left】数组，分别为到顶部和左部的距离
2) $('#id').offset().top //获取元素到顶部的距离
3) $('#id').offset().left //获取元素到左部的距离

3.获取和设置元素左部和顶部卷入的距离

1) $('#id').scrollLeft() //获取元素左侧卷入宽度; ()可以传入参数，传入参数时为设置卷入，参数不用带单位默认为PX
2) $('#id').scrollTop() //获取元素顶部卷入宽度; ()可以传入参数，传入参数时为设置卷入，参数不用带单位默认为PX

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/295386?site