41酱的小草莓

导航

offset和scroll系列属性

一、元素的offset系列属性

1. offsetWidth和offsetHeight

　　无法通过 元素.style.样式属性名 获取内部和外联的样式值，但是可以获取行内样式值，返回一个字符串。

　　元素.offsetWidth; 和 元素.offsetHeight;

返回的是数字。大小包括 内容+padding+border。

1 <script>
2       var div = document.querySelector('div');
3       console.log(div.offsetWidth);
4       console.log(div.offsetHeight);
5 </script>

offsetWidth和offsetHeight是只读的，不能设置。

 

2. offsetLeft和offsetTop

元素.offsetLeft;

元素.offsetTop; 

返回的是数字

 1 <body>
 2     <div class="f">
 3         <div class="s"></div>
 4     </div>
 5   <script>
 6       var s = document.querySelector('.s');
 7       console.log(div.offsetLeft);
 8       console.log(div.offsetTop);
 9   </script>
10 </body>

若元素没有定位时，获取的位置参照的时页面。（即元素在页面中的位置时多少）

若元素有定位（子绝父相定位），获取的位置参照的起点是上级元素。

 

3. offsetParent

 1 <body>
 2     <div class="f">
 3         <div class="s"></div>
 4     </div>
 5   <script>
 6       var s = document.querySelector('.s');
 7       console.log(s.parentNode); //获取到父元素f
 8       console.log(s.offsetParent); //获取到body
 9   </script>
10 </body>

parentNode获取上级直接的父元素，从标签嵌套关系观察

offsetParent获取上级的参照位置的“父”元素，从定位关系观察

 

二、元素的client属性

1. clientWidth和clientHeight

元素.clientWidth;

元素.clientHeight;

获取元素的大小，包含内容+padding

2. clientLeft和clientTop

元素.clientLeft;

元素.clientTop;

获取边框的厚度

 

三、scroll系列属性

1. scrollWidth和scrollHeight

元素.scrollWidth;

元素.scrollHeight;

获取元素的大小，包含内容+padding+溢出部分大小

 

2. scrollLeft和scrollTop

有滚动条时，被卷去的页面间距

元素.scrollLeft; 

元素.scrollTop;

若滚动条在窗口上时，事件注册给window

若获取被卷去的页面间距，但滚动条在窗口上时，并且事件注册给window，不要使用window调用scrollTop。

 

 

 

 

posted on 2019-09-29 16:18  41酱的小草莓  阅读(288)  评论(0)    收藏  举报