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

 更新时间:2014年07月21日 17:05:10   投稿:whsnow  
要通过元素访问样式表,那么就应该先确定是哪个元素。直接访问样式表在该样式块里找相应的样式规则,最后在该样式规则里找相应的样式

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 节点排序 2

    javascript 节点排序 2

    对支持sourceIndex的HTML文档的节点重排,使用JK提供的思路,速度至少比单纯使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})这种方式快两倍
    2011-01-01
  • javascript form 验证函数 弹出对话框形式

    javascript form 验证函数 弹出对话框形式

    javascript合法验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等(弹出对话框形式)
    2009-06-06
  • 详解html-webpack-plugin插件(用法总结)

    详解html-webpack-plugin插件(用法总结)

    这篇文章主要介绍了详解html-webpack-plugin插件(用法总结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Javascript中数组sort和reverse用法分析

    Javascript中数组sort和reverse用法分析

    这篇文章主要介绍了Javascript中数组sort和reverse用法,实例分析了sort和reverse使用时的注意事项与相关技巧,具有不错的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 超链接的禁用属性Disabled使用示例

    超链接的禁用属性Disabled使用示例

    可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击,下面有个示例,大家不妨参考下
    2014-07-07
  • JS文件/图片从电脑里面拖拽到浏览器上传文件/图片

    JS文件/图片从电脑里面拖拽到浏览器上传文件/图片

    这篇文章主要介绍了JS文件/图片从电脑里面拖拽到浏览器上传文件/图片,需要的朋友可以参考下
    2017-03-03
  • TypeScript中的类型断言[as语法|<>语法]的使用

    TypeScript中的类型断言[as语法|<>语法]的使用

    本文主要介绍了TypeScript中的类型断言[as语法|<>语法]的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 微信小程序使用template标签实现五星评分功能

    微信小程序使用template标签实现五星评分功能

    这篇文章主要为大家详细介绍了微信小程序使用template标签实现五星评分功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 微信小程序实现打卡日历功能

    微信小程序实现打卡日历功能

    这篇文章主要为大家详细介绍了微信小程序实现打卡日历功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • bootstrap 表单验证使用方法

    bootstrap 表单验证使用方法

    在web开发过程中表单验证是比较常见的需求,友好的错误提示能够用户带来极好的用户体验效果,今天小编给大家带来如何使用bootstrap 表单验证功能,一起看看吧
    2017-01-01

最新评论