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 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
js实现弹框效果
Mar 24 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用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
28个常用JavaScript方法集锦
2015/01/14 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python图像和办公文档处理总结
2019/05/28 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
商务会议邀请函
2014/01/09 职场文书
七年级音乐教学反思
2014/01/26 职场文书
普通党员对照检查材料
2014/08/28 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
旅行社计调工作总结
2015/08/12 职场文书
python process模块的使用简介
2021/05/14 Python