1.修改box1的宽度、高度、背景颜色
2.读取样式
读取样式表style的样式
语法：元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式（谁生效就获取谁的）
如果当前元素没有设置样式，则获取默认值
注意currentStyle只有IE浏览器支持，其他不支持
在其他浏览器可以使用：getComputerStyle（）这个方法获取元素当前的样式，不支持ie8以下浏览器
这个方法是windows的方法，需要2个参数：
第一个，要获取样式的元素
第二个,可以传递一个伪元素，一般都传null
getComputerStyle（）返回一个对象，再通过点调用
getComputerStyle（box1，null）.width；
如果不设置宽度，currentStyle会获取auto，getComputerStyle会获取具体的值
通过currentStyle和getComputerStyle（）读取到的样式只是值读的不能修改，如果先要修改必须通过Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload = function () {
//点击按钮修改box1大小
//获取box1
var box1 = document.getElementById("box1");
//为按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//修改box1的宽度
/*
语法： 元素.style.样式名=样式值
*/
box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "yellow";
};
//点击btn02读取元素样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
// alert(box1.style.height + box1.style.width);
//获取元素样式表的样式
//alert(box1.currentStyle.width);//只ie支持
var obj = getComputedStyle(box1, null);
//alert(getComputedStyle(box1, null).width);//不支持IE8以下浏览器
//调用写的函数
alert(getStyle(box1, "width"));
};
};
/*
定义一个函数，用来获取指定元素的当前的样式
参数： obj：要获取样式的元素
name：要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有
return getComputedStyle(obj, null)[name];//正常浏览器
} else {
return obj.currentStyle[name];//IE浏览器
}
}
</script>
</head>
<body>
<button id="btn01">修改</button>
<button id="btn02">读取样式</button>
<div id="box1"></div>
</body>
</html>
