JavaScript 之 特效

时间:2019-09-03
本文章向大家介绍JavaScript 之 特效,主要包括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>
View Code

二、client 客户区大小

  1、

  2、

  3、

三、scroll 滚动偏移

原文地址:https://www.cnblogs.com/niujifei/p/11451651.html