修改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>