文档介绍：JavaScript改变CSS样式的方法汇总 avaScript修改CSS有4种方法:(内联样式);;;。今天主要给大家介绍下前2种,因为后两种个人不是很推荐大家使用 JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力。 JavaScript修改CSS有4种方法: 修改节点style(内联样式); 改变节点class或id; 写入新的css; 替换页面中的样式表。个人不建议使用后两种方法,几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰、易理解。后面还会说说如何获取元素的真实样式和一个表单中的注意事项。 1、修改节点style(内联样式) 这种方法权重是最高的,直接写在节点的style属性上,他会覆盖其他方法设置的样式。使用方法很简单: varelement=("test"); ="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; } ="redColor";//设置class +="yellowBack";//增加class 但比较郁闷的是,这个属性是一个包含元素所有class的字符串,所有class以空格分开,这样在删除class时就很不方便(增加就好说,之间做个字符串连接就可以了,不过记得前面要加个空格~)。我之前在删除的时候用了正则表达式,根据class在字符串中的不同位置进行删除(头部、尾部、中间),不过后来想到了更好的办法,就是在className属性头尾都加上一个空格,那就全部变成中间的方法了,直接进行子串替换: //删除class func