ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 通过javascript访问外部CSS样式表

通过javascript访问外部CSS样式表

原创 Linux操作系统 作者:sunboymaqiang 时间:2012-04-28 18:13:30 0 删除 编辑
javascript. 访问外部的CSS样式表:
通常我们定义CSS样式表有三种方式:一、内部定义;二、外部定义;三、内外部结合。
一、对于内部样式的访问与修改,我们可以直接通过使用style对象就可以实现对内部样式表的访问与修改
我们可以通过一个简单的例子来说明:
中间的内容我们在这里省略

演示代码如下:

//一、通过dom中的getElementById()获取到应用的html元素
var mydiv=documet.getElementById("div1");
//二、访问该元素的style对象,再访问该对象中的属性,也可以修改属性的值
//我们可以直接修改style中的width
mydiv.style.width=990px;
//我们也可以获取到style中的属性值,例如获得background-color
//在这里我们要特别注意是通过backgroundColor获取的而不是通过background-color来获取的
alert(mydiv.style.backgroundColor);

二、对于外部样式的访问与修改,我们就不能通过上面的方式来访问到CSS样式表了,我们要通过document中的styleSheets集合来实现这个目的,
这个集合包含HTML页面中所有的样式表,DOM为每个样式表定义了一个cssRules的集合,这个集合中包含定义在样式表中的所有CSS规则,这里要
注意的就是在Mozilla和Safasi中是cssRules而在IE中是使用的rules。
我们也可以通过一个简单的例子来说明:
首先我们定义一个外部的样式文件(文件名.css)
for example:
.div1{
 width:800px;
 height:900px;
 background-color;red;
}
访问外部CSS

//这里需要注意的就是styleSheets[0]这里的0代表的是哪个css文件
 var myRules=document.styleSheets[0].rules;
//对于得到的myRules若有多个class用于选择哪个class样式我们可以通过如下方式取得对于的class样式
var backcolor=myRules["div1"].style.backgroundColor;
//也可以设置值,若我们想修改背景颜色
myRules["div1"].style.backgroundColor="black";

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/26480336/viewspace-722454/,如需转载,请注明出处,否则将追究法律责任。

下一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2012-03-28

  • 博文量
    2
  • 访问量
    13225