js计算机样式window.getComputedStyle(ele,null)与

最新推荐文章于 2020-06-25 09:56:44 发布

diebaiying3731

最新推荐文章于 2020-06-25 09:56:44 发布

阅读量385

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huanghuali/p/8564488.html

版权

一、getComputedStyle兼容IE8以上，范户籍的计算样式的值都是绝对值，没有相对单位(如：width:10em; 它打印出来是160px)

window.getComputedStyle(div,null)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.getComputedStyle(div,null)</title>
    <style type="text/css">
        *{margin:0;padding:0}
    </style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;"></div>
<script type="text/javascript">
    var div = document.getElementsByTagName('div')[0]
    console.log(div.currentStyle.width)//IE独有属性
</script>
<strong>【代码说明】</strong>
<div><strong>getComputedStyle</strong>获取计算机样式</div>


</body>
</html>

效果图：

二、ele.currentStyle

ele.currentStyle 是IE独有的属性；返回的计算样式的值不是经过转换的绝对值

封装getStyle，如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.getComputedStyle(div,null)</title>
    <style type="text/css">
        *{margin:0;padding:0}
    </style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;"></div>
<script type="text/javascript">
    var div = document.getElementsByTagName('div')[0]
    //封装
    function getStyle(elem,prop){
        if(window.getComputedStyle){        //如果它存在的话(兼容谷歌)
            return window.getComputedStyle(elem,null)[prop];//prop作为参数字符串传进来，所有得中括号
        }else{
            return elem.currentStyle[prop];   //兼容IE
        }
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/huanghuali/p/8564488.html

diebaiying3731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js计算机样式window.getComputedStyle(ele,null)与

一、getComputedStyle兼容IE8以上，范户籍的计算样式的值都是绝对值，没有相对单位(如：width:10em; 它打印出来是160px)window.getComputedStyle(div,null)<!DOCTYPE html><html lang="en"><head> <meta char...
复制链接

扫一扫