本文摘自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中eval()函数的用法
javascript脚本怎么运行
javascript怎么判断数据类型
为什么javascript小数相减会出现一长串的小数位数?
javascript函数式编程中纯函数的理解(代码)
html中如何调用javascript文件
数组长度用size还是length
简约javascript中的变量对象
javascript怎么绑定事件
ios加载html5 audio标签时遇到的问题分享
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么修改style样式