原生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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
javascript css float属性的特殊写法
Nov 13 Javascript
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
Vue 实现html中根据类型显示内容
Oct 28 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php include,include_once,require,require_once
2008/09/05 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
Python基础之getpass模块详细介绍
2017/08/10 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
八年级生物教学反思
2014/01/22 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
车辆转让协议书
2014/04/15 职场文书
创业融资计划书
2014/04/25 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
2015公司年度工作总结
2015/05/14 职场文书
建筑工程催款函
2015/06/24 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers