JavaScript改变改变CSS样式的方法汇总样式的方法汇总
JavaScript允许你即时的改变CSS样式，这样就可以将用户的眼球吸引到你想他们关注的地方上，并且提供较好的交互体验给
力 。
JavaScript修改CSS有4种方法：
修改节点style（内联样式）；
改变节点class或id；
写入新的css；
替换页面中的样式表。
个人不建议使用后两种方法，几乎所有的功能都可以通过前两种方式实现，并且代码更加清晰、易理解。
后面还会说说如何获取元素的真实样式和一个表单中的注意事项。
1、修改节点、修改节点style（内联样式）（内联样式）
这种方法权重是最高的，直接写在节点的style属性上，他会覆盖其他方法设置的样式。使用方法很简单：
var element = document.getElementById("test");
element.style.display = "none" //让元素隐藏
但是要注意的是，有些CSS样式名称是由几个单词组成的例如font-size、background-image等，他们都是用破折号（-）连接
起来的，然而JavaScript中破折号表示“减”，因此不能作为属性名称。我们需要使用“驼峰格式（camelCase）”来书写属性名，
例如fontSize、backgroundImage。
还要注意的是，很多style都是有单位的，不能只给一个数字。例如fontSize的单位有px、em、%（百分比）等。
这种方法违背了表现和行为分离的原则，一般只适合定义元素经常变化的即时样式（与行为相关），例如一个可用于拖拽的
div，随着拖拽，他的top、left属性是不断变换的，此时就不能用class或其他方式定义了，使用这种方式可以即时修改样式，
并且覆盖掉其他方式的设置。
2、更改、更改class、、id
id和class是设置样式的“钩子”，更改之后浏览器会自动更新元素的样式。
更改id的方法和class的类似，但是个人并不建议这样使用，因为id是用于定位元素的，最好不要用它来定义元素的显示样式，
并且id也常作为JavaScript的钩子，可能会引起不必要的错误。
在JavaScript中，class是一个保留关键字，因此使用className作为访问元素class的属性，例如：
.redColor{
color: red;
}
.yellowBack{
background: yellow;
}
element.className = "redColor";//设置class
element.className += " yellowBack";//增加class
但比较郁闷的是，这个属性是一个包含元素所有class的字符串，所有class以空格分开，这样在删除class时就很不方便（增加
就好说，之间做个字符串连接就可以了，不过记得前面要加个空格~）。
我之前在删除的时候用了正则表达式，根据class在字符串中的不同位置进行删除（头部、尾部、中间），不过后来想到了更
好的办法，就是在className属性头尾都加上一个空格，那就全部变成中间的方法了，直接进行子串替换：
//删除class
function removeClass(element,classRomove){
var classNames = " "+element.className+" ";
classNames = classNames .replace(" "+classRomove+" ", " ");
//String.trim(classNames);
element.className = classNames;
}
一般的样式修改最好都用这种方法，定义好CSS的样式，JavaScript只是发出样式改变的指令，具体的样式定义还是交给CSS
去做。
后两种方法，既不优雅，也有一定兼容性问题，我就不介绍了~
3、获取真实样式、获取真实样式
评论0