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中的location用法简单介绍
Mar 07 Javascript
Document 对象的常用方法
Jul 31 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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 Stream_*系列函数
2010/08/01 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
win与linux系统中python requests 安装
2016/12/04 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
通过实例解析Python return运行原理
2020/03/04 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
小学教师听课制度
2014/02/01 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
小学开学典礼主持词
2014/03/19 职场文书
节能环保口号
2014/06/12 职场文书
质量负责人岗位职责
2015/02/15 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
公司车队管理制度
2015/08/04 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
MySQL中varchar和char类型的区别
2021/11/17 MySQL
python中对列表的删除和添加方法详解
2022/02/24 Python