說明
通過JS控制CSS，我們能做出更多漂亮的頁面特效，做出更炫的交互效果。今天我們來說說JS控制CSS的各種方式。
解釋
JavaScript、CSS、HTML是前端三劍客，我們說正事之前，先來說說CSS與HTML的事。
在HTML中使用CSS有三種方式
1、內聯方式
CSS定義在單個的HTML元素中的style屬性中
2、內部樣式表
CSS通過<style></style>標籤定義在HTML頁面的<head></head>標籤中
3、外部樣式表
將CSS定義在一個外部的CSS文件中，在HTML頁面通過<link></link>標籤引用CSS文件
而JavaScript 中的DOM操作，又可以控制HTML頁面中的元素。
說到這，我們最少已經知道，三種方式，通過JS控制CSS了。
好了，我們開始說正事了。
1、通過“ . ”直接設置元素的style屬性
語法：
element.style.attributename= attributevalue;
例如：
document.body.style.width = '100px'; 注意：這裏的style屬性的值是一個對象。 這個對象所包含的屬性與CSS規則一 一對應，但是名字需要用駝峯命名的方式進行改變，比如background-color寫成backgroundColor。改寫的規則是將橫槓從CSS屬性名中去除，然後將橫槓後的第一個字母大寫。如果CSS屬性名是JavaScript保留字，則規則名之前需要加上字符串css，比如float寫成cssFloat。
document.body.style.backgroundColor= 'red'; 溫馨提示： 如果你不願意換成駝峯命名法的話，也有辦法，用“[ ]”代替 “.” , “[ ]” 中直接寫字符串類型的CSS屬性。
例如：
document.body.style['background-color']= 'red'; 如果你好奇爲什麼可以這樣做，請看這裏
簡單說 background-color 與 backgroundColor的區別
2、通過 setAttribute 方法 設置元素的style屬性
setAttribute 方法添加指定的屬性，併爲其賦指定的值。
如果這個指定的屬性已存在，則僅設置/更改值。
語法：
element.setAttribute(attributename,attributevalue)例如：
var a = document.body;
a.setAttribute("style","background-color:red;height:100px;"); 這個方法很好用，第一個參數寫“style”，第二個參數就是CSS，把需要的CSS直接粘貼進去就可以了。
注意： 兩個參數都是字符串類型的哦！
3、通過style對象的 setProperty 方法 設置CSS屬性
setProperty 方法直接設置某個CSS屬性
語法：
element.style.setProperty (propertyName, propertyValue, priority);setProperty 方法的第三個參數（priority），字符串類型，指定樣式屬性的優先級。樣式屬性的優先級可以通過getPropertyPriority方法獲取。
如果要設置!important，建議設置第三個參數 ，但是傳參的時候不用寫前面的 “!” 。
例如：
var a = document.body;
a.style.setProperty ("background-color", "green", 'important');注意： setProperty 方法 與 setAttribute 方法 是不一樣的，setProperty 方法是元素style屬性的一個方法，setAttribute 方法是元素的一個方法，雖然他們都能控制CSS，但還是有區別的。
更多關於setProperty 方法的知識請看
http://help.dottoro.com/ljdpsdnb.php
4、通過style對象的cssText屬性，控制CSS
style對象 的 cssText屬性設置或返回樣式聲明的內容作爲字符串。
語法：
element.style.cssText = string例如：
document.body.style.cssText = "background-color:red";注意： 直接用 “=” 會覆蓋原來的值，需要追加新的值就用 “+=”
5、通過元素的 class 屬性 控制CSS
我們可以通過先定義好class，然後改變元素的class屬性，來控制CSS
元素的 className 屬性設置或返回元素的 class 屬性值。
語法：
element.className = 'className'; 例如：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<style>
.redBorder{
border:1px solid red;
}
.greenBg{
background-color:green;
}
</style>
</head>
<body class="redBorder">
</body>
<script>
var a = document.body;
a.className = 'greenBg';
//元素的redBorder class會被替換 爲 greenBg
//如果兩個class 都需要,可以把+ 變成 += ,值的最前面加上一個空格，像下面這樣
//a.className += ' greenBg';
</script>
</html>溫馨提示： 是className 不是class，class在JavaScript中是保留字所以不能用，要用 className 哦！
6、通過創建 <style><style> 標籤，引入新的樣式
我們可以先在元素上定義好class屬性，然後通過JS創建<style></style>，給元素加上樣式
例如：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
</head>
<body class="redBg">
</body>
<script>
var head = document.head;
// 創建 style 元素
var styleElement = document.createElement('style');
//在創建好的style元素中，寫上CSS
styleElement.innerHTML = '.redBg{background-color:red;}';
//在head 中加上 style 元素
head.append(styleElement);
</script>
</html>7、通過創建 <link><link> 標籤，引入新的樣式
我們可以先在外部創建一個CSS文件，然後通過JS創建<link><link> 標籤，在頁面裏引入新的樣式，這個方法和 上面的創建 <style><style> 標籤 的方法很類似。
外部CSS文件（style.css）：
.redBg{
background-color:red;
}HTML頁面：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
</head>
<body class="redBg">
</body>
<script>
// 創建 link 元素
var linkElement = document.createElement('link');
//設置 linkElement 的src 爲外部CSS文件的路徑
linkElement.href = './style.css';
//在head 中加上 linkElement 元素
document.head.append(linkElement);
</script>
</html>8、通過 insertRule 或者 addRule 插入新的樣式
StyleSheet對象代表網頁的一張樣式表，它包括
<link>節點加載的樣式表和<style>節點內嵌的樣式表。
document對象的styleSheets屬性，可以返回當前頁面的所有StyleSheet對象（即所有樣式表）。它是一個類似數組的對象。
insertRule方法用於在當前樣式表的cssRules對象插入CSS規則
語法：
stylesheet.insertRule(rule, index)insertRule 方法的第一個參數是表示CSS規則的字符串，第二個參數是該規則在cssRules對象的插入位置。
例如：
var styleTag = document.createElement ("style");
var head = document.getElementsByTagName ("head")[0];
head.appendChild (styleTag);
styleTag.sheet.insertRule ("body {background:red;}", 0);更多關於insertRule 方法的知識請看
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
addRule方法
語法：
object.addRule (selector, styleDef [, positionIndex]);參數說明：
selector ： 必須，指定新規則對象的選擇器的字符串。
styleDef ： 必須，指定新規則對象的樣式定義的字符串。
positionIndex ：可選，整數，指定規則集合中新規則的位置。
var styleTag = document.createElement ("style");
var head = document.getElementsByTagName ("head")[0];
head.appendChild (styleTag);
styleTag.sheet.addRule ("body", "background:red", 0);更多關於addRule 方法的知識請看
http://help.dottoro.com/ljuucnct.php
溫馨提示： 方式8，插入的新的樣式，在頁面中看不見，如果需要看見的話，可以通過樣式表的cssRules屬性。
例如：
styleTag.sheet.cssRules總結
說了這麼多方法，要注意各種方式控制CSS後，樣式的優先級問題
| 方法 | 優先級 |
|---|---|
| 通過“ . ”直接設置元素的style屬性 | 內聯樣式 |
| 通過 setAttribute 方法 設置元素的style屬性 | 內聯樣式 |
| 通過style對象的 setProperty 方法 設置CSS屬性 | 內聯樣式 |
| 通過style對象的 cssText屬性，控制CSS | 內聯樣式 |
| 通過元素的 class 屬性 控制CSS | 內部樣式 |
通過創建 <style><style> 標籤，引入新的樣式 |
內部樣式 |
通過創建 <link><link> 標籤，引入新的樣式 |
外部樣式 |
| 通過 insertRule 或者 addRule 插入新的樣式 | 內部樣式 或 外部樣式 |
這次我們就先說到這，下次我們說說如何把他們封裝起來，方便我們以後使用。
本文參考
http://www.cnblogs.com/LiuWeiLong/p/6058059.html
http://javascript.ruanyifeng.com/dom/css.html#toc10
http://www.cnblogs.com/susufufu/p/5749922.html
