<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>读取元素当前的样式</title>
<style type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
/*
IE8及以下浏览器用这个
*/
// alert(box1.currentStyle.width);//100px
/*
在IE9以上和大多数浏览器中，我们一般用这个方法。IE8及以下不支持这个方法
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
它会将元素的样式封装成一个对象返回
通过 对象.样式名 读取样式
如果获取的样式没有设置，则会获取到真实值，而不是默认值
比如：没有设置width，它不会获取到auto，而是一个长度
需要两个参数
第一个：要获取样式的元素
第二个：伪元素，一般都传null
*/
// var box1Style = getComputedStyle(box1,null);
// console.log(box1Style.width);//100px
/*
通过currentStyle和getComputedStyle()读取到的样式都是只读的，
不能修改，如果要修改必须通过style属性
*/
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>