知识大全 用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属性值

　　举例

相关参考