用currentStyle和getCompusedStyle获取元素的样式

昨天尝试了一下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>

运行效果如下:
用currentStyle和getCompusedStyle获取元素的样式_第1张图片

你可能感兴趣的:(JavaScript)