我是靠谱客的博主 洁净水杯,最近开发中收集的这篇文章主要介绍通过javascript访问外部CSS样式表,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/26480336/viewspace-722454/

最后

以上就是洁净水杯为你收集整理的通过javascript访问外部CSS样式表的全部内容,希望文章能够帮你解决通过javascript访问外部CSS样式表所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(36)

评论列表共有 0 条评论

立即
投稿
返回
顶部