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

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

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站建设、浙江网络推广、小程序设计、浙江网络营销、浙江企业策划、浙江品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供浙江建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

1. 通过在javascript代码中的node.style.cssText="css表达式1；css表达式2；css表达式3  "的方式直接更改CSS样式。

2. 先在CSS样式表中对特定的类如“active类”设置样式（这里的active类是假定的，暂时不存在），然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设置附加到该node节点上来。

下面是详细介绍，首先是html的代码：

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

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

运行结果为：

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

同样运行结果为：

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

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