【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代码:
然后使用上面所说的第二种方式更改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样式的两种方式的更多相关文章
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- js中获取css样式的两种方式
1. 对象.style.样式名 弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...
- JS设置CSS样式的几种方式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- JS设置CSS样式的几种方式【转】
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- JavaScript判断各浏览器CSS前缀的两种方式
不管浏览器更新的多快,号称多么支持标准.厂商不同,他们之间还是有很多差异.我们需要区分出这些差异,针对不同的浏览器做不同的处理. 比如 CSS 前缀,IE 的是 "-ms-",旧版 ...
- js 修改页面样式的两种方式
1. element.style 行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
随机推荐
- win7 64位远程连接oracle11g64位
1.首先下载即时客户端 instantclient-basic-windows.x64-11.2.0.4.0,下载地址:http://www.oracle.com/technetwork/topics ...
- Vue学习笔记：基础
Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的 插值 数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值 指令 指令的定义:Direct ...
- Spring Boot学习笔记：传统maven项目与采用spring boot项目区别
项目结构区别 传统的maven构建的项目结构如下: 用maven构建的采用springboot项目结构如下: 二者结构一致,区别如下:传统项目如果需要打成war包,需要在WEB-INF目录结构配置we ...
- 【WebService】WebService之CXF和Spring整合（六）
前面介绍了WebService与CXF的使用,项目中我们经常用到Spring,这里介绍CXF与Spring整合 步骤 1.创建一个Maven Web项目,可以参照:[Maven]Eclipse 使用M ...
- hdu 6208(后缀自动机、或者AC自动机
题意:给你n个字符串,问你是否存在一个字符串可以从中找到其他n-1个字符串. 思路:其实很简单,找到最长的那个字符串对他进行匹配,看是否能匹配到n-1个字符串. 可以用AC自动机或者后缀自动机做,但是 ...
- django之补充
一 QuerySet类型 QuerySet类型:只和orm有关,如果一涉及数据库,就会有QuerySet类型的出现. QuerySet切片操作:QuerySet是支持切片操作的,不过不能放负数.查询集 ...
- Java 数组拷贝方法 System.arraycopy
System类提供的数组拷贝方法: public static native void arraycopy(Object src, int srcPos, Object dest, int destP ...
- Python学习杂记
Python中关键字yield有什么作用? 首先得理解generators,而理解generators前还要理解iterables: 你可以用在for...in...语句中的都是可迭代的:比如list ...
- mongoDB的安装与连接
1.安装mongoDB 官网下载安装: https://www.mongodb.com/download-center/community 安装时选择自定义设置,安装到C盘program Files文 ...
- Lagrange 乘子法求最优解
clc clear syms x y z r1 r2 w f=x^+y^+z^+w^; g1=*x-y+z-w-; g2=x+y-z+w-; h=f-r1*g1 -r2*g2; hx=diff(h,x ...