原生JS修改CSS样式的两种实现方式对比

原生JS修改CSS样式的两种方法

本文将介绍使用原生JavaScript修改CSS样式的两种具体方法。

第一种方法是通过JavaScript代码直接修改节点的style.cssText属性，赋值格式为“css表达式1；css表达式2；css表达式3”，从而直接覆盖或添加CSS样式。

第二种方法是在CSS样式表中预先定义特定类（例如“active”类，假设该类暂时未使用），然后在JavaScript代码中通过设置node.className为“active”，将预设的CSS样式应用到该节点上。

HTML基础结构示例

以下是具体的HTML代码示例：

<style type="text/css">
   div {
 float: left;
 padding: 20px;
 margin: 10px;
 border: 1px solid #000;
 background-color: #fff;
 color: #000;
 }
   .active
    {
      background-color:blue
    }
</style>
<body>
  <div class="root">
  </div>
</body>

代码仅包含一个简单的div元素，其运行效果如下所示。

方式一：直接修改style.cssText

首先演示第一种方式，即直接修改CSS样式，对应的JavaScript代码如下：

<script type="text/javascript"> 
var root=document.getElementsByClassName("root")[0];
 root.style.cssText="background-color: blue;color: #fff;";
</script>

执行上述代码后的运行结果如下。

方式二：通过className切换类名

接着演示第二种方式，即通过类名修改CSS样式，对应的JavaScript代码如下：

<script type="text/javascript"> 
  var root=document.getElementsByClassName("root")[0];
   root.className="active";
</script>

该方式运行后的结果如下。

两种方式对比总结

总结：这两种方式在最终视觉效果上相同，但从操作过程来看，第二种方式（即node.className）实现了CSS与JavaScript代码的分离，逻辑更加清晰有序。当CSS语句较为简单时，两种方式无明显差异；然而，若CSS样式较为复杂，第二种方式显然更具条理性和可维护性。

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