本文摘自PHP中文网,作者青灯夜游,侵删。
修改方法:1、使用“元素对象.className”修改样式表的类名;2、使用“元素对象.style.cssTest”修改嵌入式的css样式;3、使用“元素对象.setAttribute()”语句通过更改外联的css文件,从而改变元素的样式。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
在很多情况下,都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。
1、使用obj.className来修改样式表的类名。
2、使用obj.style.cssTest来修改嵌入式的css。
3、使用更改外联的css文件,从而改变元素的css
下面是一段html代码和css代码用来解释上面方法的区别的。
CSS
1 2 3 4 5 6 7 | .style 1 { margin : 10px auto ; background-color : #9999FF ; display : block ; color :White; border : 1px solid white ; padding : 10px 25px ; font-size : 18px ; }
.style 1: hover{ background-color : #66B3FF ; cursor : pointer ;}
.style 2 { margin : 10px auto ; background-color : gray ; display : block ; color : black ; border : 1px solid white ; padding : 10px 25px ; font-size : 18px ; }
.style 2: hover{ background-color : black ; color :White; cursor : pointer }
|
HTML
1 2 3 4 5 6 7 8 | <div>
<input id= "btnB" type= "button" name= "btnLogin" value= "登录" class = "style1" />
<div id= "tool" >
<input type= "button" value= "【obj.style.className】更改样式" onclick= "changeBackgroundColor()" />
<input type= "button" value= "【obj.style.cssText】更改样式" onclick= "changeFontSize()" />
<input type= "button" value= "更改外联css样式" onclick= "recover()" />
</div>
</div>
|
方法一、使用obj.className来修改样式表的类名
阅读剩余部分
相关阅读 >>
详解javascript中async/await是如何工作的
javascript中slice方法怎么用
javascript如何计算除法
js怎么设置元素css样式
javascript中求最大值语句是什么
javascript怎么实现鼠标追随
javascript获取当前日期
用javascript实现斐波那契数列
javascript中event loop的分析
javascript操作dom对象之select(详细解答)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么修改style样式