您的位置:首页 > Web前端 > JavaScript

javascript获取元素的计算样式

2019-05-25 07:02 2111 查看

背景
使用css控制页面有4种方式,分别为行内样式(内联样式)、内嵌式、链接式、导入式。

行内样式(内联样式)即写在html标签中的style属性中,如 <div style="width:100px;height:100px;"></div>

内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style>

链接式即为用link标签引入css文件,例如<link href="test.css" rel="external nofollow" type="text/css" rel="stylesheet" />

导入式即为用import引入css文件,例如@import url("test.css")

如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式,如果一个元素的部分样式信息写在内联样式中,一部分写在外部的css文件中,通过style属性是不能获取到元素的完整样式信息的。因此,需要使用元素的计算样式才获取元素的样式信息。

获取计算样式
元素的style下的属性,默认为空字符串;

获取计算后的样式(非行间样式):
getComputedStyle(element).属性
获取到的结果为 带单位的字符串 ,如 :100px;
写法: getComputedStyle(box).height;

获取宽高(尺寸)
ele.clientHeight/Width
支持padding,不包含边框,元素可视区宽度;

ele.offsetWidth/Height
包含padding、border
以上2个,如果设置一个固定值,就以固定值为依据显示,不会以被内容撑开显示;

ele.scrollWidth/Height
被内容撑开的高度(不包含边框);
无论是否设置固定样式,都以被内容撑开我显示结果;

边框尺寸

clientLeft/clientTop边框尺寸
getComputedStyle(box3).borderTopWidth 边框尺寸
以上3种,获取到的都是不带单位的数字,并且范围为可视区;

绝对位置
元素距离
offsetParent
定位父级,没有定位父级走body;
offsetLeft
当前元素(左外边框)到定位父级的(左内边框)距离;
offsetTop
当前元素(上外边框)到定位父级的(上内边框)距离;
获取的是不带单位的数字。
如果要使用上面的属性,一定要做到以下几点:
1、子集有绝对定位;
2、定位父级也一定要有定位;
3、自己和父级都要有宽高(触发haslayout,zoom:1);

getBoundingClientRect()
当前元素到页面可视区的尺寸、距离;
注意:
是跟滚动条走的。
也就是拖动滚动条值会变;
包含:width/height/left/right/top/bottom/x/y
写法:box2.getBoundingClientRect();
使用定位距离做一个小例子:

 let timer = null;

    box.onclick =function (){
        timer = setInterval(()=>{
            box.style.left= box.offsetLeft + 1 +'px';
        },16.7)
    }
1
2
3
4
5
6
7
在此了解以下渲染帧:
渲染帧是指浏览器一次完整绘制过程,帧之间的时间间隔是DOM视图更新的最小间隔。 由于主流的屏幕刷新率都在60hz,因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms 内页面才够流畅不会有卡顿感。
封装绝对位置

// 使用边框、定位位置
    class Tools {
        position(ele){
            let left = 0;
            let top = 0;
            let obj = ele;

            while(obj){
             // t = 当前元素的外边距 + 当前元素边框
                left += obj.offsetLeft + obj.clientLeft;
                top += obj.offsetTop + obj.clientTop;
                //重新设置Obj是谁,让obj变为当前的定位父级
                obj = obj.offsetParent; //box3 -> box2 -> box1 ->
            }
            left -= ele.clientLeft;   //多加一次box3的border,所以要减去
            top -= ele.clientTop;
            return {
                left,
                top
            }
        }
    }

    let t1 = new Tools;
    console.log(t1.position(box3).top);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
返回顶部的小例子

<style>
*{
    margin:0;
    padding:0;
}
#box{
    width:100px;
    height:50px;
    font-size:20px;
    text-align: center;
    line-height: 50px;
    color:#fff;
    background: red;
    cursor: pointer;
    position:fixed;
    bottom:0;
    right:0;
    display: none;
}
body,html{
    height:3000px;
}
</style>
</head>
<body>
    <div id="box">返回顶部</div>
<script>
    window.onscroll = function(){
        // console.log(window.pageYOffset);
        if(window.pageYOffset >= 600){
            box.style.display = 'block';
        }else{
            box.style.display = 'none';
        }
    }

    let timer = null;
    box.onclick = function(){
        let t = window.pageYOffset;
        timer = setInterval(() => {
            t-=100;
            if(t <= 0){
                t = 0;
                clearInterval(timer);
            }
            window.scrollTo(0,t);
        }, 16.7);
       
    }
</script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: