JavaScript获取CSS中样式的值

来源：互联网发布：百度搜索引擎优化指南编辑：程序博客网时间：2024/05/22 06:22

平时我们在写js的时候多多少少需要获取到元素的的样式值
简单粗暴先说明一下今天的要做到事情，用js获取div的高度，用弹框输出

<body><div id='la'>说说我的身高呗</div></body>

css代码：

div{float:left;width:100px;height: 100px;background-color: #00ced1;}

以往我总是喜欢用style.height,那就照常做呗，结果出现了这样的情况：

window.onload = function(){function1();}function function1(){var div = document.getElementById('la');alert(div.style.height);}

这里写图片描述
结果为空
如果我们把height属性写在行内会怎么样呢？

<body><div id="lady" style="height: 100px"></div></body>

这里写图片描述
这说明了.style.height这个方法只会获取到标签内属性值，而获取不到css文件的值，这就很麻烦了，因为我们大多时候都是把样式写在css文件里面的，如何获取呢？
可以试着使用.getComputedStyle(div,false).height

window.onload = function(){function1();}function function1(){var div = document.getElementById('la');alert(getComputedStyle(div,false).height);}

这里写图片描述

0 0