知识大全用JavaScript修改CSS属性

Posted 2022-07-20 属性

篇首语：我自横刀向天笑，去留肝胆两昆仑。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全用JavaScript修改CSS属性相关的知识，希望对你有一定的参考价值。

用JavaScript修改CSS属性 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　只有写原生的javascript了

　　用JS修改标签的 class 属性值

　　class 属性是在标签上引用样式表的方法之一它的值是一个样式表的选择符如果改变了 class 属性的值标签所引用的样式表也就更换了所以这属于第一种修改方法

　　更改一个标签的 class 属性的代码是

　　document getElementById( id ) className = 字符串; document getElementById( id ) 用于获取标签对应的 DOM 对象你也可以用其它方法获取 className 是 DOM 对象的一个属性它对应于标签的 class 属性字符串是 class 属性的新值它应该是一个已定义的CSS选择符

　　利用这种办法可以把标签的CSS样式表替换成另外一个也可以让一个没有应用CSS样式的标签应用指定的样式

　　举例

　　<style type=text/css> txt font size: px; font weight: bold; color: red; </style> <div id="tt">欢迎光临！</div> <p><button onclick="setClass()">更改样式</button></p> <script type=text/javascript> function setClass() document getElementById( "tt" ) className = "txt"; </script>

　　用JS修改标签的 style 属性值 style 属性也是在标签上引用样式表的方法之一它的值是一个CSS样式表 DOM 对象也有 style 属性不过这个属性本身也是一个对象 Style 对象的属性和 CSS 属性是一一对应的当改变了 Style 对象的属性时对应标签的 CSS 属性值也就改变了所以这属于第二种修改方法

　　更改一个标签的 CSS 属性的代码是

　　document getElementById( id ) style 属性名 = 值; document getElementById( id ) 用于获取标签对应的 DOM 对象你也可以用其它方法获取 style 是 DOM 对象的一个属性它本身也是一个对象属性名是 Style 对象的属性名它和某个CSS属性是相对应的

　　说明这种方法修改的单一的一个CSS属性它不影响标签上其它CSS属性值

　　举例

cha138/Article/program/Java/JSP/201311/20011

知识大全 用JavaScript修改CSS属性

知识大全用JavaScript修改CSS属性