JavaScript 之特效

Posted 2022-09-27 niujifei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 之特效相关的知识，希望对你有一定的参考价值。

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

一、offset 偏移量

　　1、offsetParent

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

　　2、offsetLeft / offsetTop

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

　　3、offsetWidth / offsetHeight

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

　　注意：offset 属性是只读属性

　 Demo：

 1 // 结构
 2 <div id="box">
 3     <div id="child">
 4       
 5     </div>
 6 </div>
 7 // 样式
 8   <style>
 9     body 
10       margin: 0;
11     
12     #box 
13       position: relative;
14       width: 300px;
15       height: 300px;
16       background-color: red;
17       overflow: hidden;
18       margin: 50px;
19     
20     #child 
21       width: 100px;
22       height: 100px;
23       background-color: blue;
24       margin: 50px;
25       border: 10px solid yellow;
26       padding: 10px;
27     
28   </style>
29 // js
30 <script>
31    // 获取子元素的位置和大小
32     var child = document.getElementById(‘child‘);
33     console.log(child.offsetParent);
34     // 获取child的位置     offsetLeft 距离offsetParent的横向偏移
35     console.log(child.offsetLeft);
36     console.log(child.offsetTop);
37 
38     // 获取child的大小   包括边框和padding
39     console.log(child.offsetWidth);
40     console.log(child.offsetHeight);
41 </script>