本文摘自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输出方式有哪些
javascript模块化怎么理解?
jquery中deferred对象的用法介绍(附示例)
java和javascript有什么区别
javascript字符串比较方法有哪些
分享es2019中值得收藏的8个有用功能
javascript如何取字符串后几位
如何设计算法?常见的算法范式介绍
javascript基础入门买什么书
javascript return语句怎么用
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么修改style样式