下面这三组是关于元素大小、位置相关的属性

一、offset 偏移量

　　1、offsetParent

　　　　该属性获取距离当前元素最近的定位父元素，如果没有定位父元素此时是 body 元素

　　2、offsetLeft / offsetTop

　　　　该属性获取当前元素距离 offsetParent 的横向偏移和纵向偏移

　　3、offsetWidth / offsetHeight

　　　　该属性获取当前元素的宽高，宽高包括：内容（content）、边框（border）和内填充（padding）

　　注意：offset 属性是只读属性

　 Demo：

 // 结构

 <div id="box">

     <div id="child">

     </div>

 </div>

 // 样式

   <style>

     body {

       margin: 0;

     }

     #box {

       position: relative;

       width: 300px;

       height: 300px;

       background-color: red;

       overflow: hidden;

       margin: 50px;

     }

     #child {

       width: 100px;

       height: 100px;

       background-color: blue;

       margin: 50px;

       border: 10px solid yellow;

       padding: 10px;

     }

   </style>

 // js

 <script>

    // 获取子元素的位置和大小

     var child = document.getElementById('child');

     console.log(child.offsetParent);

     // 获取child的位置     offsetLeft 距离offsetParent的横向偏移

     console.log(child.offsetLeft);

     console.log(child.offsetTop);

     // 获取child的大小   包括边框和padding

     console.log(child.offsetWidth);

     console.log(child.offsetHeight);

 </script>

二、client 客户区大小

　　1、clientLeft / clientTop

　　　　该属性是获取当前元素的 border-left、border-right 的宽度。（没有 border-right/border-bottom属性）

　　2、clientWidth / clientHeight

　　　　该属性是获取当前元素的宽高，宽高包括：内容（content）和内填充（padding）

　　Demo：

 // 结构

  <div id="box"> </div>

 // 样式

  <style>

     body {

       margin: 0;

     }

     #box {

       width: 100px;

       height: 100px;

       margin: 50px;

       border: 30px solid red;

       padding: 10px;

       background-color: green;

     }

   </style>

 // js

 <script>

     var box = document.getElementById('box');

      // clientLeft  是border-left 的宽度

     // clientTop    border-top 的宽度

     console.log(box.clientLeft);

     console.log(box.clientTop);

     // 获取大小   包括padding  但是不包括边框

     console.log(box.clientWidth);

     console.log(box.clientHeight);

 </script>

三、scroll 滚动偏移

　　 1、scrollLeft / scrollTop

　　　　该属性获取元素内容滚动出去的横向距离 / 纵向距离

　　2、scrollWidth / scrollHeight

　　　　该属性获取元素的大小，指的是：内容（content）+ 内填充（padding）和未显示出来的内容

　　Demo：

 // 结构

 <div id="box">

     Javascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox等）支持。

   </div>

 // 样式

 <style>

     body {

       margin: 0;

     }

     #box {

       width: 100px;

       height: 100px;

       margin: 50px;

       border: 30px solid red;

       padding: 10px;

       background-color: green;

       overflow: auto;

     }

   </style>

 // js

  <script>

     // scroll

     var box = document.getElementById('box');

     // 当拖动box中的滚动条的时候触发

     box.onscroll = function () {

       console.log(box.scrollLeft);

       console.log(box.scrollTop);

     }

     // 内容的大小，包括padding 和未显示的内容，不包括滚动条

      console.log(box.scrollWidth);

      console.log(box.scrollHeight);

   </script>

巴特西

JavaScript 之 offset 、client、scroll

下面这三组是关于元素大小、位置相关的属性

一、offset 偏移量

1、offsetParent

2、offsetLeft / offsetTop

3、offsetWidth / offsetHeight

二、client 客户区大小

1、clientLeft / clientTop

2、clientWidth / clientHeight

三、scroll 滚动偏移

1、scrollLeft / scrollTop

2、scrollWidth / scrollHeight

最新文章

热门文章