原生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语句比较复杂的话,显然第二种方式比较有条不紊。
原生js更改css样式的两种方式的更多相关文章
- 【javascript】原生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) 如果想保 ...
- js 修改页面样式的两种方式
1. element.style 行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...
- javascript总结40:DOM中操作样式的两种方式
1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权
如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- open in browser
Sublime Text 3 Build 3065 Preferences-Key Bindings User: 直接key binding:{ "keys": ["al ...
- ASP.NET速度优化
用过ASP.NET的人都知道吧,页面首次打开很慢,本来网站第一次启动就慢,但别的页面如果没有访问过的第一次访问也会慢. 原因:asp.net程序第一次运行需要验证数字签名,这个验证需要远程连接微软服务 ...
- MyBatis动态SQL与模糊查询
sqlxml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC & ...
- Android 自定义通用的loadingview
介绍 好久没有写博客啦,最近在接近新年了,年前的工作都要收尾,所以特别忙,周末抽空写了个通用的加载view,写篇博客分享出来. 功能 1.显示加载视图,加载失败的时候显示加载失败视图,数据为空时显示数 ...
- (二)Windows下Redis的主从复制
Redis拥有非常强大的主从复制功能,而且还支持一个master可以拥有多个slave,而一个slave又可以拥有多个slave,从而形成强大的多级服务器集群架构.目前在同一台window下安装三个r ...
- modprobe和insmod的区别
linux设备驱动有两种加载方式insmod和modprobe,下面谈谈它们用法上的区别1.insmod一次只能加载特定的一个设备驱动,且需要驱动的具体地址.写法为: insmod dr ...
- UTF编码检测
最近工作上正好需要进行UTF编码检测,自己写了一个,分享给大家,希望可以帮得上有需要用的朋友 public bool isUtf8(byte[] rawText) { bool result = tr ...
- js精要之函数
数组排序 ,,,,,]; arr.sort(function(a,b){ return a-b; }); console.log(arr); arguments 参数存储对象 function ref ...
- spring MVC cors跨域实现源码解析
# spring MVC cors跨域实现源码解析 > 名词解释:跨域资源共享(Cross-Origin Resource Sharing) 简单说就是只要协议.IP.http方法任意一个不同就 ...
- vs2015 动态链接库问题
问题: 最近要用vs2015编写一个动态链接库,生成动态链接库后,换到另一台windows下发现无法使用. 使用depends检查发现原因是缺少 MSVCP140.DLL等动态链接库. 解决: 将编译 ...