简单说 通过JS控制CSS的各种方式（上）
版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/77888446
说明
通过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