下面我给大家介绍的是原生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语句比较复杂的话，显然第二种方式比较有条不紊。

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

  1. 【javascript】原生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. js 修改页面样式的两种方式

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

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

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

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

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

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

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

  9. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. doubango(2)--底层协议栈结构分析

    tsip_stack_handle_t 实例 1.        tsip_stack_handle_t的创建 在底层,真正运转的协议栈结构式tsip_stack_handle_t的一个实例,它的创建 ...

  2. 从[NOI2008志愿者招募]浅谈线性规划在网络流构图上的巧用

    首先来看一下题..http://www.lydsy.com/JudgeOnline/problem.php?id=1061 1061: [Noi2008]志愿者招募 Description 申奥成功后 ...

  3. java连接ms sql server各类问题解析

    首先先来说下使用微软自己开发的架包进行ms sql server数据库的连接时,sql 2000与sql 2005的连接方式略有不同: 1.首先驱动不一样,sql 2000的连接驱动包有三个,分别是: ...

  4. SQL SERVER运维日记--收缩数据库

    一个小故事 某天,小王正在和HR妹妹闲聊,正HAPPY时,,突然收到系统告警消息,数据库磁盘被剩余空间500M,OMG,不行,磁盘快满了,要是业务要停了,,那就小王只能删库到跑路了,,, 先检查下,有 ...

  5. Cesium原理篇：glTF

    关键字:Cesium glTF WebGL技术 大纲: 1 glTF简介,这是一个什么东西,有哪些特点 2 Cesium如何加载,渲染glTF,逻辑结构和关键技术 3 个人总结,从glTF学习如何设计 ...

  6. Java字符串之String与StringBuilder

    String与SringBuiler的一些比较   在Java中,我们会大量使用字符串,但是String究竟是怎样工作的我们可能没有想过太多,其实在String类中,每一个看起来会修改String值的 ...

  7. 【.Net Framework 体积大？】不安装.net framework 也能运行！？开篇叙述-1

    [声明:请尊重作者micro-chen的原创,抓文章,请添加来源和作者署名.作者保留追责权利.......] 写在前言 看着日渐没落的.net ,心里多少有了点悲凉.国内的越来越多的新兴公司 都是JA ...

  8. SwingBench---ORACLE压力测试工具

    SwingBench---ORACLE压力测试工具 ◆描述SwingBench是Oracle UK的一个员工在一个被抛弃的项目的基础上开发的.目前稳定版本2.5,基于JDK.该工具是免费的,可以在作者 ...

  9. 获取当前用户的网络状态--iOS

    http://m.blog.csdn.net/blog/u014483033/39229417

  10. 用手机或外部设备在同一局域网下访问虚拟主机wampsever的方法版本号是2.4.9

    1,首先在虚拟服务器电脑上可以打开http://localhost/ 2,在外部设备访问时报错为:You don't have permission to access / in on this se ...