【javascript】原生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语句比较复杂的话,显然第二种方式比较有条不紊。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Ryan Miao

照着官方文档学习react

准备 先要准备环境。搭建一个基于webpack的react环境:Hello ReactJS. 一些要点 我在想是否应该完整的记录照抄的过程呢。毕竟已经开始一段,...

3147
来自专栏技术墨客

React新特性——Protals与Error Boundaries

在React 16.x 新增了一个名为“Protals”的特性,直接按照字面意思翻译实在不靠谱。在描述这个特性时,我们还是用官方的英文单词来指定它。Portal...

874
来自专栏更流畅、简洁的软件开发方式

【实现】表单控件里的子控件的变化。

     上一篇说的是表单布局上的变化,也就是通过TR、TD的设置,实现了多行多列的效果。那么格子画好了,我们 可以往里面放控件了。上次都是用的文本框,这个显然...

2098
来自专栏Fundebug

JavaScript异步编程史:回调函数到Promise到Async/Await

摘要: 异步编程时JavaScript以及Node.js的一大亮点,其中有什么心酸的黑历史呢?

1555
来自专栏繁花云

12-01-js深入学习

问题表现是:httpd服务器已经开启了,端口也已经监听了,但是就是无法访问

380
来自专栏mukekeheart的iOS之旅

iOS学习——键盘弹出遮挡输入框问题解决方案

  在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码、查询时要输入查询信息、注册或申请时需要填写一些信息...

4066
来自专栏CDA数据分析师

如何使用python进行web抓取?

本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

1948
来自专栏CRPER折腾记

Vue 折腾记 - (4) 写一个不大靠谱的 loading 组件

有需求,就要动手丰衣足食...公司考虑兼容IE9,那么css3 animation写的loading就无缘了 因为keyframes IE10+ , 那么要实现...

502
来自专栏BeJavaGod

ssm redis 数据字典在J2EE中的多种应用与实现

数据字典在项目中是不可缺少的“基础设施”,关于数据字典如何设计如何实现,今天抽空讲一下吧 先看一下表设计: ? ? 通过自定义标签来实现页面的渲染: ? 再看...

3324
来自专栏编程

如何用Vim提高开发效率

背景 虽然笔者是Android开发工程师,但也接触过各种IDE(不限于Android开发)。不同的IDE往往都有不同的快捷键,我们总不能对每种IDE都进行配置吧...

1848

扫码关注云+社区