html通过id设置css样式 JavaScript修改style id class等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、%(百分比)等。

这种方法违背了表现和行为分离的原则，一般只适合定义元素经常变化的即时样式(与行为相关)，例如一个可用于拖拽的p，随着拖拽，他的top、left属性是不断变换的，此时就不能用class或