昨天尝试了一下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>
运行效果如下: