用currentStyle和getCompusedStyle获取元素的样式

最新推荐文章于 2023-02-28 10:25:28 发布

justforuse

最新推荐文章于 2023-02-28 10:25:28 发布

阅读量916

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u014291497/article/details/50412271

版权

javascript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

昨天尝试了一下calc()方法，用来动态设定元素的宽度，字体大小属性，那计算后的属性值到底是多少呢？

首先说一下：style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。内联样式就是只直接写在元素标签内的样式，比如< div style=”width:200px”>。

要想获取内部和外部样式就要是用currentStyle和getCompusedStyle()了。

currentStyle是在IE下运行的,getCompusedStyle()在其它浏览器下运行。

兼容性可参考： http://caniuse.com/
demo如下：

<html>
<head>
    <style type="text/css">
        #div {
            font-size: calc(2em + 5px);
            width: 200px;
        }
    </style>
</head>
<body>

<div id="div">div节点</div>

<script>
    var div = document.getElementById("div");
    var style= div.currentStyle ?
            div.currentStyle : window.getComputedStyle(div, null);
    alert(style.fontSize);
</script>
</body>
</html>