本文摘自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来修改样式表的类名
阅读剩余部分
相关阅读 >>
js怎么设置元素css样式
教你用html5画一个馋人的西瓜
javascript中对html中元素属性的读取
javascript如何删除array数组元素
深入讨论javascript中set对象如何让代码更快
javascript如何判断节点是否存在
javascript中比较运算符隐式类型转换的介绍(附示例)
react中如何引入样式
javascript怎么删除子元素
js中函数表达式 vs 函数声明,聊聊它们的不同点
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么修改style样式