原生js更改css样式的两种方式

　　

<强>下面我给大家介绍的是原生js更改CSS样式的两种方式:

　　

1。通过在javascript代码中的的方式直接更改CSS样式。

　　

2。先在CSS样式表中对特定的类如“积极类”设置样式(这里的活跃类是假定的,暂时不存在),然后再在javascript代码中通过使得CSS样式表中对活跃类的样式设置附加到该节点节点上来。

　　

下面是详细介绍,首先是html的代码:

　　 　　 　　& lt;风格类型=" text/css "比; 　　div { 　　浮:左; 　　填充:20 px; 　　保证金:10 px; 　　边界:1 px固体# 000; 　　background - color: # fff; 　　颜色:# 000; 　　} 　　.active 　　{ 　　背景颜色:蓝色 　　} 　　& lt;/style> 　　& lt; body> 　　& lt; div类="根"比; 　　& lt;/div> 　　& lt;/body> 　　 　　

只是一个简单的div,运行结果为

　　

原生js更改css样式的两种方式

　　

首先使用上面所说的第一种方式更改css样式,写入如下的javascript代码:

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　var根=document.getElementsByClassName(“根”)[0]; 　　root.style。cssText="背景颜色:蓝色,颜色:# fff;”; 　　& lt;/script> 　　 　　

运行结果为:

　　

原生js更改css样式的两种方式

　　

然后使用上面所说的第二种方式更改css样式,写入如下的javascript代码:

　　 　　 　　& lt;脚本type=" text/javascript祝辞 　　var根=document.getElementsByClassName(“根”)[0]; 　　root.className=盎钤尽? 　　& lt;/script> 　　 　　

同样运行结果为:

　　

原生js更改css样式的两种方式

　　

<强>总结:这两种方式结果相同,但就操作过程而言,第二种方式也就是“node.classname”的方式使得css和javascript的写入分隔开来,显然更加合理有序一些。如果css语句比较简单的话,这两种方式没有差别,但若css语句比较复杂的话,显然第二种方式比较有条不紊。

　　

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

原生js更改css样式的两种方式