JavaScript访问样式表代码

比如：当我们将鼠标移动到一个图标上的时候，图标会出现一些动画效果（渐变放大、闪动、更换颜色等），而这一切的友好效果基本上都跟样式（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以这种方式去访问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);
}

代码效果：

3、这个时候，你可用通过修改样式来改变背景颜色，但是最好不要这样做，因为你改掉的是CSS类，其他引用了改CSS类的元素也会改变背景颜色，所以如果需要修改样式，做好直接修改单个元素的style属性，比如：document.getElementById("div1").style.backgroundColor="Blue";

赞 (0)

相关推荐

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • javascript:FF/Chrome与IE动态加载元素的区别说明

    javascript:FF/Chrome与IE动态加载元素的区别说明

    复制代码 代码如下: <!doctype html><html><head> <title>ff 与 ie 动态加载元素的区别</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <style type="text/css">  li{margin:0;p

  • javascript实现动态加载CSS

    复制代码 代码如下: <script type="text/javascript">             function addStyle(stylePath) {                 var container = document.getElementsByTagName("head")[0];                 var addStyle = document.createElement("link"

  • 动态加载脚本提升javascript性能

    通过文档对象模型(DOM),几乎可以用Javascript动态创建HTML中的所有 内容.其根本在于,<script>标签与页面中的其他元素并无差异:都能通过DOM引用,都能在文档中移动.删除,甚至被创建.用标准的DOM方法可以非常容易地创建一个新年的<script>元素: 复制代码 代码如下: <script type="text/javascript"> var script=document.createElement("script

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • javascript 动态修改样式和层叠样式表代码

    W3C DOM2样式规则 ========================================================== CSSStyleSheet对象 CSSStyleSheet对象表示的是所有CSS样式表,包括外部样式表和使用<style type="text/css"></style>标签指定的嵌入式样式表. CSSStyleSheet同样构建于其他的DOM2 CSS对象基础之 上,而CSSStyleRule对象表示的则样式表中的每条

  • javascript中动态加载js文件多种解决办法总结

    一个比较全部在动态加方法 复制代码 代码如下: /*    动态加载js v1.0 by:dum     用法:src="webJsBase.js?load=a,b"    注:加载本目录下js*/var webJsBase = {    require: function(libraryName) {        document.write('<script type="text/javascript" src="'+libraryName+'

  • javascript如何动态加载表格与动态添加表格行

    一.动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部.如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句 若在当前html文件中,则写在<script>标签内部,如 复制代码 代码如下: <script type="text/javascript" > document.getElement

  • JavaScript访问样式表代码

    JavaScript访问样式表代码

    比如:当我们将鼠标移动到一个图标上的时候,图标会出现一些动画效果(渐变放大.闪动.更换颜色等),而这一切的友好效果基本上都跟样式(style)有关,所以这一篇,我学习JavaScript对style的操作. 技术关键点:style.这一篇要求我们对CSS样式有一定的了解.(读者可以google一下CSS的相关内容) 操作步骤: 1.页面代码(包括JS代码)如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

  • Javascript 访问样式表实现代码

    再记录一下 Javascript访问样式表 Javascript可以访问网页中元素的style属性,例如: <div id="main" style="background-color:red"></div> 通过js访问style属性 alert(document.getElementById("main").style.backgroundColor); 通过js改变style属性 document.getElemen

  • javascript插入样式实现代码

    javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用<style>标签插入页面样式(这里说的不是style属性). 一.页面中引入外部样式: 在<head>

  • asp.net 动态引用样式表代码

    1. 添加CSS样式: Style style = new Style(); style.ForeColor = System.Drawing.Color.Navy; style.BackColor = System.Drawing.Color.LightGray; this.Header.StyleSheet.CreateStyleRule(style, null, "body"); 2. 链接外部的CSS样式表: HtmlLink link = new HtmlLink(); li

  • asp.net  动态引用样式表代码

    1. 添加CSS样式: Style style = new Style(); style.ForeColor = System.Drawing.Color.Navy; style.BackColor = System.Drawing.Color.LightGray; this.Header.StyleSheet.CreateStyleRule(style, null, "body"); 2. 链接外部的CSS样式表: HtmlLink link = new HtmlLink(); li

  • 使用Mootools动态添加Css样式表代码,兼容各浏览器

    但是这样做就不利于插件的移植,所以就写了这个函数用来动态产生Css. 复制代码 代码如下: AddCss=function(c){ var Sty=document.createElement('style'); Sty.type='text/css'; if(Browser.ie){ Sty.styleSheet.cssText=c; }else{ var Frag=document.createDocumentFragment(); Frag.appendChild(document.cre

  • 获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)

    可是DOM.style这种写法只能访问<DOM style=""></DOM>,这样在标签里内置的样式,如果样式写在<style type="text/css"></style>,或者.css文件里,那么就办法读到样式了. 其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过"最终样式"对象.其中 IE中这个对象叫做current

  • JavaScript CSS修改学习第三章 修改样式表

    请注意代码和传统的DHTML的区别.在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表.在这里查看W3C DOM-CSS的兼容性列表.定义 一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里有详细的样式声明.这个页面的样式表如下: 复制代码 代码如下: <link rel="stylesheet" href="../quirksmode.css"> <style> <!--

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

    JavaScript访问CSS属性的方式总体说来有两种:"通过元素访问"."直接访问样式表".另外访问样式的时候有一个不可忽略的问题--运行时样式. 1.通过元素访问 既然是要通过元素访问样式表,那么就应该先确定是哪个元素.这是DOM的内容,在此先不多说.获取引用之后就可以通过 "引用.style.要访问的属性" ,来访问某个属性.举个例子,看如下代码. <pre name="code" class="html

  • javascript判断ie浏览器6/7版本加载不同样式表的实现代码

    关键点:1.对浏览器版本的判断:2.修改样式表路径 其中第二点也常用在实时修改网页模板.论坛风格的场合,实际上就是修改样式表路径来加载不同的样式表. 代码: 复制代码 代码如下: <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); try{ //代

随机推荐