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


Posted in Javascript onMarch 15, 2017

下面我给大家介绍的是原生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,运行结果为

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

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

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

运行结果为:

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

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

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

同样运行结果为:

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

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

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

Javascript 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
js实现的网站首页随机公告随机公告
Mar 14 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
js清除浏览器缓存的几种方法
Mar 15 #Javascript
从零开始做一个pagination分页组件
Mar 15 #Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 #Javascript
javascript图片预览和上传(兼容IE)
Mar 15 #Javascript
轻松理解JavaScript之AJAX
Mar 15 #Javascript
jQuery插件ContextMenu自定义图标
Mar 15 #Javascript
JavaScript对象引用与赋值实例详解
Mar 15 #Javascript
You might like
php数据库抽象层 PDO
2011/05/07 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php分页查询的简单实现代码
2017/03/14 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JS求平均值的小例子
2013/11/29 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Javascript继承机制详解
2017/05/30 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
python下10个简单实例代码
2017/11/15 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
C#面试问题
2016/07/29 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
校运会广播稿100字
2014/01/27 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
青涩记忆观后感
2015/06/18 职场文书
公开致歉信
2019/06/24 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers