JavaScript访问样式表代码


Posted in Javascript onOctober 15, 2010

比如:当我们将鼠标移动到一个图标上的时候,图标会出现一些动画效果(渐变放大、闪动、更换颜色等),而这一切的友好效果基本上都跟样式(style)有关,所以这一篇,我学习JavaScript对style的操作。

技术关键点:style。这一篇要求我们对CSS样式有一定的了解。(读者可以google一下CSS的相关内容)

操作步骤:

1、页面代码(包括JS代码)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Style Example</title> 
<style type="text/css"> 
div.special 
{ 
background-color:Red; 
height:50px; 
width:50px; 
} 
</style> <script type="text/javascript"> 
function getBackGroundColor() { 
var oDiv = document.getElementById("div1"); 
alert(oDiv.style.backgroundColor); 
} 
</script> 
</head> 
<body> 
<div id="div1" class="special"></div> 
<input type="button" value="Get BackGround Color" onclick="getBackGroundColor();"/> 
</body> 
</html>

JS代码中获得了div对象,并输出了div对象的背景颜色,一切看起来都那么完美,可是效果总是让我们失望,如下:
JavaScript访问样式表代码
这样看来,JavaScript以这种方式去访问CSS样式无法达到效果,原因:CSS数据并非存储在style属性中,而是存储在类中。所以接下来要做的:就是怎么样去访问CSS类?

2、幸运的是,我们找到了document.styleSheets集合。document.styleSheets包含了html页面中所有样式表的引用和所有的<style>元素。

因为浏览器的不同,访问样式表中单独的规则(规则:指定是CSS类,例如上面html代码中的div.special)的方法是不同的。DOM为每一个样式表指定一个cssRules的集合,但是IE却把这个集合命名为rules。所以在获取样式集合之前,代码需要做一个技巧性的改动:

oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

每个规则都包含selectorText特性,div.special就是上面html中CSS规则的selectorText的值。规则还包含style属性,这个时候就可以通过style属性获取背景颜色了。来看代码吧:

function getBackGroundColor() { 
var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules; 
alert(oCSSRules[0].style.backgroundColor); 
}

代码效果:
JavaScript访问样式表代码
3、这个时候,你可用通过修改样式来改变背景颜色,但是最好不要这样做,因为你改掉的是CSS类,其他引用了改CSS类的元素也会改变背景颜色,所以如果需要修改样式,做好直接修改单个元素的style属性,比如:document.getElementById("div1").style.backgroundColor="Blue";
Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
jquery实现显示已选用户
Jul 21 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
IE下js调试工具Companion.JS
Oct 15 #Javascript
jquery $.ajax各个事件执行顺序
Oct 15 #Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 #Javascript
jquery 元素相对定位代码
Oct 15 #Javascript
JQuery小知识
Oct 15 #Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 #Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 #Javascript
You might like
php中变量及部分适用方法
2008/03/27 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php链表用法实例分析
2015/07/09 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
Koa 中的错误处理解析
2019/04/09 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python logging通过json文件配置的步骤
2020/04/27 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
python 动态绘制爱心的示例
2020/09/27 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
检讨书范文1000字
2015/01/28 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers