<html>
<head>
<title></title>
<style type="text/css">
#hell{
display: inline-block;
background:red;
width:100px;
height:100px;
border:1px solid yellow;
}
</style>
</head>
<body>
<div id="hell"></div>
<script type="text/javascript">
var a = document.getElementById("hell").style.width;
console.log(a);
</script>
</body>
</html>
大家可以看上面这段代码,这段代码的输出结果是空
为啥是空呢
因为啊 通过dom.style.width这种方式只能取到行内属性 也就是写在HTML中的style属性,而不是css属性 如下
<body>
<div id="hell" style="height:20px;"></div>
<script type="text/javascript">
var a = document.getElementById("hell").style.height;
console.log(a);
</script>
</body>
非要取css中的值得话 只能变相的取得 如下
var a = document.getElementById("hell").offsetHeight;
console.log(a);
-------------------------------------------------------------------------------分割线---------------------------------------------------------------------------------------------
最新获取的方法 使用var b = window.getComputedStyle(a).height; 可以动态获取元素的高度