1.通过ELEMENT类型的DOM节点方法
//name 是特性名称， value是特性对应的值 elemet.setAttribute(name,value) elemet.getAttribute(name) elemet.removeAttribute(name)
以上三个方法用来对Node节点分别设置节点特性值，获取节点某个特性的值，以及删除节点某个特性之用，用到CSS的方面：
element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.setAttribute("style","color:red;font-size:16px;");即:
element.setAttribute("style",cssRules); //cssRules是具体的CSS规则当然，这样的方式有两个方面需要注意
只是针对元素的行内样式有影响，对层叠样式文件无影响。
每一次这样的修改设置，都会清空之前行内样式的规则
比如：
element=document.getElementById("#id"); //假设这里获取一个元素，并且没有行内样式
element.setAttribute("style","color:red;"); //这个时候这个元素内的文本颜色为红色
element.setAttribute("style","font-size:20px;"); //这个时候文本颜色不再是红色的，恢复到原先默认的颜色，但是字体变成了20px这里影响是某个元素的整个行内样式
2. 通过ELEMENT类型的DOM节点style属性（这个是浏览器允许的而非DOM规则）
我们常见的代码:
element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style="color:red;font-size:20px;" //不应该这样做这里元素的style属性属于一个ELEM对象，CSSStyleDeclaration对象是CSS属性和值的一个键值对的集合。
而且style属性也是用来表示元素的内联style特性的，同样忽略了样式表。CSSStyleDeclaration本身只是只读的，所以不能用来设置修改样式的属性值。
但是，现实情况是现代浏览器都允许修改。
当然因为现代浏览器允许修改，所以直接这样也可以（只影响行内样式）：
element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style="color:red;font-size:20px;" //当然这里需要写完整的CSSRule这里影响是某个元素的整个行内样式
3. 通过ELEMENT类型的DOM节点的style属性的cssText方法（这个是DOM提供的）
前面提到了元素的style属性实际是一个CSS属性键值对集合，按照规则只能读取不能修改。
所以想修改，应该使用style属性的属性cssText（这里是整条规则，同样只影响行内样式）:
element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style.cssText="color:red;font-size:20px;" //当然这里需要写完整的CSSRule这里影响是某个元素的整个行内样式
---------------------------------------------------以下方法不会一次性影响某个元素的整个行内样式
4. 依然是通过ELEMENT类型的DOM节点的style属性
元素的style属性可以访问CSS属性列表，所以可以直接修改在CSS属性列表内的CSS属性:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
直接修改CSS属性:
element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style.color="red"; // 修改了字体颜色
element.style.fontSize="20px"; //修改了字体大小，与之前不同属性不受影响依然保留这里要注意CSS属性列表里面CSS属性和DOM属性（通常是来JS控制）的对应关系，font-size是CSS的属性，对应到DOM的属性是fontSize,例子中style是DOM节点的属性，所以访问的是DOM的CSS属性
这里发现，这种方法与之前相同的都是仅仅针对元素的行内样式起作用。而不同的是，前面3种方法的修改或编辑维护工作必须“一步到位”，如果不能一次配置完，可能结果不是所预料的，而这个第4种方法可以分开设置不受影响。
5. ELEMENT元素style属性的方法
前面还是提到元素的style属性是一个对象，一个CSS属性和值的键值对的集合，这个对象叫CSSStyleDeclaration，这个对象有几个方法:
//propertyName 是CSS属性名 ， propertyValue是CSS属性值 element.style.setProperty(propertyName,propertyValue) element.style.getProperty(propertyName) element.style.removeProperty(propertyName)
那么通过这3个方法，可以很方便的编辑维护CSS属性:
element=document.getElementById("#id"); //或者 document.querySelector("#id")
element.style.setProperty("color","red"); //字体设置红色
element.style.setProperty("font-size","20px"); //字号20px这个方法和第四个方法其实是一样的，只影响行内样式，而且不需要“一步到位”。
6.前面的方法都是对元素的行内样式有影响，而不影响外部的样式表，这个方法是直接添加已有的样式表（内置或外置）
//动态创建内置样式表
var style = document.createElement('style');
style.innerHTML = '#id{color:red;font-size:20px;}#';
document.head.appendChild(style);
//动态添加外置样式表
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'index.css'); //已经存在这个index.css文件
document.head.appendChild(link);以上的方法都是针对元素的行内样式做的修改维护，没有涉及到文档的外置或者内置样式表内的属性值做修改。后续将会单独针对样式表做介绍。
参考：
1. http://www.cnblogs.com/susufufu/p/5749922.html
2. https://shadeofgod.github.io/2016-10-26/通过javascript修改css样式的方式/
