修改css样式
1.通过内联样式来修改css样式.
语法：元素.style.样式名 = 新的样式值 例如：box1.style.width = “400px”;
原理：根据css的优先级!important > 行内（内联）样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性的关系，在执行此段js代码的时候会写入一个内联样式，之后根据优先级会覆盖掉之前的css样式。
如果在某个css样式属性后表明了!import,将不会被覆盖。
注意对于类似background-color这样命名的css属性，js会将-当成运算符减号，因此我们需要改变命名方式，使用驼峰命名。 如：background-color改成backgroundColor
btn1.onclick = function(){
box1[0].style.width = "400px";
box1[0].style.backgroundColor = "red";
}
读取css样式
1.通过内联样式读取css元素样式
语法：元素.style.样式名
通过这个方法只能读取内联样式中的样式名，不知内联样式写的css样式不可读取。有局限性！！！
btn2.onclick = function(){
alert(box1[0].style.width);
}
2.ie获取当前显示的样式
语法：元素.currentStyle.样式名 如果没有设置样式将显示默认值，如：指定元素没有设置width，将会读取的是auto;
注意：
1.此方法只支持ie8以下浏览器，其他浏览器不支持。
2.只能只读，不可修改，须通过style内联方法来修改样式 ,因为返回时带有单位px，如要计算和修改需用parseInt转换为数字才可计算
报错信息
btn3.onclick = function(){
alert(box1[0].currentStyle.width);
}
3.其他浏览器获取当前显示样式的方法
getComputedStyle()此方法是window即浏览器窗口对象的方法，可以直接使用，需要两个参数，分别是需要获取样式的元素和一个伪元素，通常写null即可
步骤：
1.通过getComputedStyle()方法得到一个对象obj
2.obj.样式名
如果没有设置样式将不显示默认值 ，会显示一个当前真实的值。如：指定元素没有设置width，将会读取的是当前元素被撑开的宽度值;
注意：1.此方法不支持ie8以下的浏览器。2.只能只读，不可修改，须通过style内联方法来修改样式
btn4.onclick = function(){
var obj = getComputedStyle(box1[0],null);
alert(obj.backgroundColor);
alert(obj.width);
}
解决读取css样式兼容性问题
完美兼容性的读取样式方法
定义一个函数来获取当前的样式，从而解决以上三个方法局限性以及兼容性的问题.
原理:因为ie浏览器有currentStyle属性 其他浏览器及ie8以上的浏览器有此getComputedStyle()函数方法，可以做一个if else的判断来根据不同的浏览器来选择使用的方式。
btn5.onclick = function(){
alert(getStyle(box1[0],"width"));
// console.log(getComputedStyle());
// alert(getComputedStyle);
}
function getStyle(obj,name){
if(getComputedStyle){
return getComputedStyle(obj,null)[name];//注意此处只能用[]来表示属性，代表变量
}else{
return obj.currentStyle[name];
}
}
案例全代码：
<!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{
width: 200px;
height: 200px;
background-color:plum ;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementsByClassName("box1");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
btn1.onclick = function(){
box1[0].style.width = "400px";
box1[0].style.backgroundColor = "red";
}
btn2.onclick = function(){
alert(box1[0].style.width);
}
btn3.onclick = function(){
alert(box1[0].currentStyle.width);
}
btn4.onclick = function(){
var obj = getComputedStyle(box1[0],null);
alert(obj.backgroundColor);
alert(obj.width);
parseInt
}
btn5.onclick = function(){
alert(getStyle(box1[0],"width"));
// console.log(getComputedStyle());
// alert(getComputedStyle);
}
function getStyle(obj,name){
if(getComputedStyle){
return getComputedStyle(obj,null)[name];//注意此处只能用[]来表示属性，代表变量
}else{
return obj.currentStyle[name];
}
}
}
</script>
</head>
<body>
<div class="box1"></div><br>
<input id="btn1" type="button" value="点我">
<input id="btn2" type="button" value="读取样式">
<input id="btn3" type="button" value="ie获取当前样式">
<input id="btn4" type="button" value="非ie获取当前样式">
<input id="btn5" type="button" value="获取当前样式">
</body>
</html>