JavaScript访问CSS属性的几种方式介绍


Posted in Javascript onJuly 21, 2014

JavaScript访问CSS属性的方式总体说来有两种:“通过元素访问”、“直接访问样式表”。另外访问样式的时候有一个不可忽略的问题——运行时样式。

1.通过元素访问

既然是要通过元素访问样式表,那么就应该先确定是哪个元素。这是DOM的内容,在此先不多说。获取引用之后就可以通过 “引用.style.要访问的属性” ,来访问某个属性。举个例子,看如下代码。

<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
</body> 
</html>

当我们想要获取#a的背景色的时候就可以 document.getElementById("a").style.backgroundColor;这样就完成了访问,之后是要返回还是更改属性值那就随你便了。

2.直接访问样式表

直接访问样式表总的来说就是“先找到相应的样式块,然后在该样式块里找相应的样式规则,最后在该样式规则里找相应的样式”。

先说什么是样式块。在代码中,CSS代码会存在于<style></style>标签之间或<link>之中,一个<style></style>或<link>就是一个样式块。在代码中可能从上到下依次排列着多个代码块,我们可以像访问数组元素一样访问样式块。例如我们要访问样式块中的第一个,就可以document.styleSheets[0]

然后说什么是样式规则。先看如下代码

<pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
#b{ 
height:100px; 
width:100px; 
background-color:blue; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
<div id="b"></div> 
</body> 
</html>

代码中分别规定了#a和#b的样式,#a的样式的集合或#b的集合就是一个样式规则。在这个样式块中,对#a的是第一个样式规则,对#b的是第二个样式规则。我们同样可以像访问数组元素一样访问样式规则。例如我们要访问#b样式规则,就可以document.styleSheets[0].cssRules[1] 当然你可以选择这么写document.styleSheet[0].rules[1]但这种写法不被Firefox支持。

然后我们就可以访问相应的样式了。例如我们要把#b的背景色改成绿色,就可以document.styleSheets[0].cssRules[1].style.backgroundColor="green";

3.运行时样式

看如下代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
color:red; 
} 
#b{ 
height:100px; 
width:100px; 
} 
</style> 
</head> 
<body> 
<div id="a"> 
<div id="b">观察字体颜色</div> 
</div> 
</body> 
</html>

当我们运行alert(document.getElementById("b").style.color);的时候发现弹窗上什么都没输出,但页面的字体颜色明明是红色,为啥呢?这是因为每个元素的style对象属性并不是即时更新的。当我们要弹窗上输出红色的时候就要用运行时样式。window.getComputedStyle(document.getElementById("b"),null).color这样就可以访问到“红色”。访问运行时样式也有另外一种写法document.getElementById("b").currentStyle.color 但这种写法只有IE支持。

Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 #Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 #Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 #Javascript
jquery显示隐藏input对象
Jul 21 #Javascript
jquery实现保存已选用户
Jul 21 #Javascript
jquery实现显示已选用户
Jul 21 #Javascript
jquery操作checkbox示例分享
Jul 21 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
python生成式的send()方法(详解)
2017/05/08 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python函数和模块的使用总结
2019/05/20 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
大三自我鉴定范文
2013/10/05 职场文书
会计专业自荐信范文
2013/12/02 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
绿色出行口号
2014/06/18 职场文书
银行求职自荐书
2014/06/25 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS