<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
100px;
height: 100px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
// 点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
var w=getStyle(box1,"width");
alert(w);
};
};
/*
定义一个函数，用来获取指定元素的当前的样式
参数：
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle){
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
}else{
// IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
// return window.getComputedStyle? getComputedStyle(obj, null)[name]: obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br /><br />
<div id="box1" style=" 200px;"></div>
</body>
</html>