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的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
javascript面向对象编程代码
Dec 19 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 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&amp;mysql(五)
2006/10/09 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
JSON 数据格式详解
2017/09/13 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
python爬虫之urllib3的使用示例
2018/07/09 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
几款好用的python工具库(小结)
2020/10/20 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
小学生检讨书大全
2014/02/06 职场文书
工程专业应届生求职信
2014/02/19 职场文书
创业计划书之水果店
2019/07/18 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL