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

最新推荐文章于 2024-05-04 14:55:11 发布

木小蛮

最新推荐文章于 2024-05-04 14:55:11 发布

阅读量1w

点赞数 6

本文链接：https://blog.csdn.net/xiaoxiaoshuai__/article/details/78033514

版权

javascript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

offset

1 篇文章 0 订阅

订阅专栏

获取、设置页面元素到顶部、左部距离、宽高元素卷入（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

木小蛮

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分（scroll、scrollTop、scrollLeft、offset、offsetTop、offsetLeft）

获取、设置页面元素到顶部、左部距离、宽高元素卷入（scroll）部分一、javascript部分 1. 获取元素节点的高度和宽度 1) offsetWidth // 获取元素节点宽度包括元素宽度如果有滚动条包含滚动条所占的位置（实际元素宽度） 2) clientWidth // 获取元素节点的宽度不包含滚动条所占的位置 3) scrol...
复制链接

扫一扫