原生js更改css样式的两种方式
更新时间：2017年03月15日 16:53:34 作者：外婆的彭湖湾
本文主要介绍了原生js更改css样式的两种方式，具有很好的参考价值，下面跟着小编一起来看下吧
下面我给大家介绍的是原生js更改CSS样式的两种方式：
1. 通过在javascript代码中的node.style.cssText="css表达式1；css表达式2；css表达式3 "的方式直接更改CSS样式。
2. 先在CSS样式表中对特定的类如“active类”设置样式（这里的active类是假定的，暂时不存在），然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设置附加到该node节点上来。
下面是详细介绍，首先是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,运行结果为
首先使用上面所说的第一种方式更改css样式，写入如下的javascript代码:
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.style.cssText="background-color: blue;color: #fff;";
</script>
运行结果为：
然后使用上面所说的第二种方式更改css样式，写入如下的javascript代码:
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.className="active";
</script>
同样运行结果为：
总结：这两种方式结果相同，但就操作过程而言，第二种方式也就是“node.classname”的方式使得css和js的写入分隔开来，显然更加合理有序一些。如果css语句比较简单的话，这两种方式没有差别，但若css语句比较复杂的话，显然第二种方式比较有条不紊。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
JavaScript事件Event对象详解(属性、方法、自定义事件)
Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,这篇文章主要给大家介绍了关于JavaScript事件Event对象(属性、方法、自定义事件)的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了微信小程序获取网络类型的方法,结合完整实例形式分析了微信小程序通过wx.getNetworkType获取网络类型的相关操作技巧,需要的朋友可以参考下2019-03-03
本文是小编基于js实现的520表白代码，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
本文主要介绍了JS生成登录验证码的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-12-12
由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素 可以具有不同的类型,数组的元素设置可以包含其他数组,这样就可以创建一个复杂的数组了.2009-12-12
浅谈javascript中的instanceof和typeof
这篇文章主要简单介绍了javascript中的instanceof和typeof的相关资料,需要的朋友可以参考下2015-02-02
JavaScript出现setTimeout倒计时误差的原因分析
setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关，本文就来和大家讲讲具体出现的原因以及解决方法，需要的可以参考一下2023-06-06
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
这篇文章主要介绍了bootstrap模态框跳转到当前模板页面，框消失了，而背景依然存在问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JavaScript拖拽、碰撞、重力及弹性运动实现方法,涉及JavaScript数学运算结合时间函数实现运动效果的相关技巧,需要的朋友可以参考下2016-01-01
今天小编就为大家分享一篇layerUI下的绑定事件实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论