封装link或style中的css规则

原创 2016年05月31日 16:03:33

      CSSStyleSheet类型表示的是样式表,包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。这两个元素本身分别是由HTMLLinkElement和HTMLStyleElement类型表示的。但是,CSSStyleSheet类型相对更加通用一些,它只表示样式表,而不管这些样式表在HTML中是如何定义的。此外,上述两个针对元素的类型允许修改HTML特性,但CSSStyleSheet对象则是一套只读的接口。使用下面的代码可以确定浏览器是否支持DOM2级样式表。

var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");

CSSStyleSheet继承自StyleSheet,后者可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下。

  • disabled:表示样式表是否被禁用的布尔值。这个属性是可读/写的,将这个值设置为true可以禁用样式表。
  • href:如果样式表是通过<link>包含的,则是样式表的URL;否则,是null。
  • media:当前样式表支持的所有媒体类型的集合。与所有DOM集合一样,这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中特定的项。如果集合是空列表项,表示样式表适用于所有媒体。在IE中,media是一个反映<link>和<style>元素media特性的字符串。
  • ownerNode:指向拥有当前样式表的节点的指针,样式表可能是在HTML中通过<link>或<style>引入的。如果当前样式表是其它样式表通过@import导入的,则这个属性值为null。IE不支持这个属性。
  • parentStyleSheet:在当前样式表是通过@import导入的情况下,这个属性是一个指向导入它的样式表的指针。
  • title:ownerNode中的title属性的值。
  • type:表示样式表类型的字符串。对CSS样式表而言,这个字符串是“type/css”。

除了disabled属性之外,其它属性都是只读的。在支持以上所有这些属性的基础上,CSSStyleSheet类型还支持下列属性和方法:

  • cssRules:样式表中包含的样式规则的集合。IE不支持这个属性,但有一个类似的rules属性。
  • ownerRule:如果样式表是通过@import导入的,这个属性就是一个指针,指向表示导入的规则;否则,值为null。IE不支持这个属性。
  • deleteRule(index):删除cssRules集合中指定的位置的规则。IE不支持这个方法,但支持一个类似的removeRule()方法。
  • insertRule(rule,index):向cssRules集合中指定的位置插入rule字符串。IE不支持这个方法,但支持一个类似的addRule()方法。

应用于文档的所有样式表是通过document.styleSheets集合来表示。

不同浏览器的document.styleSheets返回的样式表也不同。所有浏览器都会包含<style>元素和rel特性被设置为“stylesheet”的<link>元素引入的样式表。IE和Opera也包含rel特性被设置为“alternate stylesheet”的<link>元素引入的样式表。

也可以直接通过<link>或<style>元素取得CSSStyleSheet对象。DOM规定了一个包含CSSStyleSheet对象的属性,名叫sheet;除了IE,其它浏览器都支持这个属性。IE支持的是styleSheet属性。

具体封装代码是:

//添加link或style的CSS规则
Base.prototype.addRule = function (num, selectorText, cssText, position) {
	var sheet = document.styleSheets[num];
	if (typeof sheet.insertRule != 'undefined') {//W3C
		sheet.insertRule(selectorText + '{' + cssText + '}', position);
	} else if (typeof sheet.addRule != 'undefined') {//IE
		sheet.addRule(selectorText, cssText, position);
	}
	return this;
}

//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
	var sheet = document.styleSheets[num];
	if (typeof sheet.deleteRule != 'undefined') {//W3C
		sheet.deleteRule(index);
	} else if (typeof sheet.removeRule != 'undefined') {//IE
		sheet.removeRule(index);
	}
	return this;
}






93 添加class 移出class 移除/移出link或style的css规则,不常用

Base.js var $=function()//调用 {     return new Base(); }; //对象式 function Base() {     //创...

JS动态引入js,CSS——动态创建script/link/style标签

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc....
  • songylwq
  • songylwq
  • 2013年01月15日 15:27
  • 19756

LINK : fatal error LNK1104: cannot open file "Debug/Style.exe"

C++/MFC编程中经常会遇到标题中的在链接时候的报错 原因:Style.exe程序正在运行,要先关闭此程序,才能进行编译连接。 尤其是在MFC中要注意了,本来编译连接执行时候,应该弹出一个界面,...

程序开发基础学习二(C++ Google Style 命名规则)

无规矩不成方圆,新的岗位就需要服从团队的编码规则。很开心团队用的是Google的C++编码规则,大概看了下Google 的编码规则,正如九天翔雁说的:“Google的 C++ Style Guid...

程序开发基础学习二(C++ Google Style 命名规则)

无规矩不成方圆,新的岗位就需要服从团队的编码规则。很开心团队用的是Google的C++编码规则,大概看了下Google 的编码规则,正如九天翔雁说的:“Google的 C++ Style Guide远...
  • hackmind
  • hackmind
  • 2011年07月15日 11:04
  • 11720

程序开发基础学习二(C++ Google Style 命名规则)

转载一个网友的文章: 无规矩不成方圆,新的岗位就需要服从团队的编码规则。很开心团队用的是Google的C++编码规则,大概看了下Google 的编码规则,正如九天翔雁说的:“Goog...

程序开发基础学习二(C++ Google Style 命名规则)

by:武龙飞          无规矩不成方圆,新的岗位就需要服从团队的编码规则。很开心团队用的是Google的C++编码规则,大概看了下Google 的编码规则,正如九天雁翔说的:“Google的 ...

Google C++Style Guide【C++编程风格指南解读】——Windows代码规则

Windows 程序员有自己的编程习惯, 主要源于 Windows 头文件和其它 Microsoft 代码. 我们希望任何人都可以顺利读懂你的代码, 所以针对所有平台的 C++ 编程只给出一个单独的指...

Google C++ Style Guide之命名规则

通用命名规则:     函数名,变量名以及文件名应该是自描述的,应避免使用缩写。类型和变量应使用名词,而函数应包含动词。     int num_errors;                  ...

关于TP-LINK宽带路由器上的“转发规则”功能用途及设置办法 -- LAN与WAN通信的IP转换

现在TP-LINK的家用宽带路由器由于价格便宜,性能也还过的去,市场占有率相当高,TP-LINK的家用路由器里有项功能:"转发规则",相当一部分人还是不清楚它的用途,接下来简单的说一下。 我们知...
  • azymq
  • azymq
  • 2014年09月30日 11:24
  • 1658
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:封装link或style中的css规则
举报原因:
原因补充:

(最多只允许输入30个字)