下面我给大家介绍的是原生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代码:

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

<script type="text/javascript">

       var root=document.getElementsByClassName("root")[0];

           root.className="active";

</script>

同样运行结果为：

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

【javascript】原生js更改css样式的两种方式的更多相关文章

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

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  2. js中获取css样式的两种方式

    1. 对象.style.样式名  弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...

  3. JS设置CSS样式的几种方式

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  4. JS设置CSS样式的几种方式【转】

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...

  5. JavaScript判断各浏览器CSS前缀的两种方式

    不管浏览器更新的多快,号称多么支持标准.厂商不同,他们之间还是有很多差异.我们需要区分出这些差异,针对不同的浏览器做不同的处理. 比如 CSS 前缀,IE 的是 "-ms-",旧版 ...

  6. js 修改页面样式的两种方式

    1.  element.style       行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...

  7. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  8. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  9. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

随机推荐

  1. jdbc元数据 以及自己动手写一个curd框架

      数据库元数据(MetaData):数据库存储结构定义信息 (库.表.列 定义信息) ParameterMetaData 参数元数据 ---- 获得预编译SQL语句中 ? 信息 getParamet ...

  2. Django之url定义和ORM框架的使用

    前言,Django安装 pip install django # 官网安装最新版本 pip install django -i "https://pypi.doubanio.com/simp ...

  3. yum 安装报错：Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stock error was 14: curl#6 - "Could not resolve host: mirrorlist.centos.org; Unknown error"

    [root@venn09 ~]# yum install -y vim Loaded plugins: fastestmirror Could not retrieve mirrorlist http ...

  4. 2018.11.03 NOIP模拟 树（长链剖分优化dp）

    传送门 考虑直接推式子不用优化怎么做. 显然每一个二进制位分开计算贡献就行. 即记录fi,jf_{i,j}fi,j​表示距离iii这个点不超过jjj的点的每个二进制位的0/10/10/1个数. 但直接 ...

  5. Vbs脚本简单使用

    之前在做项目时用到了一点vbs脚本,记录下. C++程序调用vbs脚本 System(vbs路径 参数); //空格隔开 Vbs脚本 '''''Vbs脚本解析参数 Set objArgs = Wscr ...

  6. Docker技术入门与实战（文摘）

    第一部分 基础入门 第1章 初识容器与Docker 第2章 核心概念与安装配置 第二部分 实战案例 第三部分 进阶技能 第四部分 开源项目

  7. shell知识积累

    Ubuntu下常用的快捷键:https://blog.csdn.net/u010771356/article/details/53543041 变量名和等号之间不能有空格,变量名中间不能有空格,可以使 ...

  8. java常用设计模式五：建造者模式

    1.定义 是一种对象构建的设计模式,它可以将复杂对象的建造过程抽象出来(抽象类别),使这个抽象过程的不同实现方法可以构造出不同表现(属性)的对象. 产品类:一般是一个较为复杂的对象,也就是说创建对象的 ...

  9. 在vue中使用后台提供 的token验证方式总结及使用方法

    token是相对会叫安全的使用暗码形式的数据传输,由后台产生,并且传输到前台,前台可以将保存,在前台每次发送请求的时候可以携带token,后台可以对token进行验证,通过验证的通过请求可以对数据进行 ...

  10. ejb servlet demo

    官方文档: http://docs.oracle.com/javaee/6/tutorial/doc/gijre.html package converter.ejb; import java.mat ...