注:style它只能获取到内联样式中的属性值;currentStyle它由于兼容性不好,是IE专属的用来获取CSS属性,但是谷歌和火狐都不支持;getComputedStyle()方法,也不能完美兼容,只支持IE9+以上的浏览器
故,使用一个函数将其兼容性统一解决:
var CurrentStyle = function (element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
完整代码可供参考如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读取元素当前样式</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function () {
var CurrentStyle = function (element) {
return element.currentStyle ||
document.defaultView.getComputedStyle(element, null);
};
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
alert(box1.style.width); //style只能读内联样式
alert(CurrentStyle(box1).width); //基本样式都可以读出来
}
}
</script>
</head>
<body>
<button id="btn01">点击1</button>
<br><br>
<div id="box1"></div>
</body>
</html>