封装link或style中的css规则
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') {//W3Csheet.insertRule(selectorText + '{' + cssText + '}', position);} else if (typeof sheet.addRule != 'undefined') {//IEsheet.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') {//W3Csheet.deleteRule(index);} else if (typeof sheet.removeRule != 'undefined') {//IEsheet.removeRule(index);}return this;
}
封装link或style中的css规则相关推荐
- css平台HTDC币,是否应该从最新的设置中应用CSS规则?
这是一个令人困惑的行为,我在FireFox和Chrome中看到:我有一个HTML文件,其样式来自两个CSS文件.有时样式适用于第二个文件,有时来自第一个文件.怪异的行为可以看出,在下面的例子:是否应该 ...
- dw中怎么在html中加css,在Dreamweaver中编辑CSS规则的步骤
在前文中我们学会了怎么设置h1标签的属性,如果我们认为某一属性设置不合理需要修改,该怎么操作呢?在Dreamweaver CS6有3种方式可以实现CSS规则的编辑. (1)在代码区域内直接进行CSS代 ...
- ASP.NET在主题中添加CSS文件
ASP.NET在主题中添加CSS文件 在ASP.NET中,可以使用CSS来控制页面上HTML元素和ASP.NET控件的皮肤.如果在主题文件夹中添加了CSS文件,则在页面应用主题时也会自动应用CSS. ...
- css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原标题:CSS的命名方式:BEM(区块.元素.修饰符) 本资源由 伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 » 重要概念 "Block"区块 区块的定义是:一个逻辑和 ...
- DIV+CSS 之 网页切图过程中div+css命名规则
网页切图过程中div+css命名规则 内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
- style type=text/css中的type=text/css到底是什么意思
最佳答案 type="text/css"是指定MIME类型,其中: text是指对象为网页中的文本 css或是javascript是指当前指定的文本类型... 如果要在HTML文件 ...
- style 放入css文件失效_React中使用CSS的7种方式
来源 | http://www.fly63.com/article/detial/1961 1.在组件中直接使用style 不需要组件从外部约会css文件,直接在组件中书写. import react ...
- css规则可以放在云上,CSS中!important规则的使用方法
CSS中!important规则的使用方法 发布时间:2020-06-15 10:53:11 来源:亿速云 阅读:129 作者:Leah 这期内容当中小编将会给大家带来有关CSS中!important ...
- html中 一条样式规则,css规则的基本格式是什么?
CSS(Cascading Styel Sheet)是控制 Web 页面外观的一系列格式设置规则,是网页设计必不可少的工具之一.下面我们就开始学习css的基本语法格式. css规则的基本格式是什么? ...
最新文章
- 用adb命令启动停止Android程序
- (零)我为什么要写Linux学习笔记?
- 抛出异常–缓慢而丑陋
- 程序员面试金典 - 面试题 16.06. 最小差(排序+双指针)
- hashmultimap java_【Java 学习笔记】 HashMultimap(guava)
- 李志民:只修长城不会有真正的安全
- nfs+lvm解决磁盘空间扩容问题
- 华为S9303三层交换机一次配置经历和心得
- PDM系统的结构设计
- 2018中国双态运维用户大会现场精彩集锦
- ping结果中TTL是什么意思
- python getchar函数_linux命令行下用getchar()函数捕获按键
- 你想知道的优惠券业务,SkrShop告诉你
- httpwatch使用_使用JavaScript的HTTPWatch自动化
- Netty学习笔记(一)--- 初识Netty
- 分享一些 Vue 的视频教程和电子书资源
- word中表格出现断线的问题
- DbContext(String)+SqlQuery一起使用
- qt 设置背景图片、背景色步骤
- php 抽象工厂模式,PHP设计模式(三)抽象工厂模式(Abstract Factory)
热门文章
- 解决问题:The server time zone value ‘�й���ʱ��‘ is unrecognized or represents more than one time zone.
- nas架设php网站,使用QNAP NAS虚拟主机功能架设多个网站
- 使用IntelliJ IDEA搭建kafka源码环境时遇到Output path错误解决办法
- win10桌面版outlook邮箱配置流程
- Mac系统自带中文输入法英文标点
- python for 无限循环
- 鲲鹏Arm64 openEuler 虚拟机学习
- 【Solved】syntax error near unexpected token done
- Solved Issues
- python自动化接口_Python接口自动化——Web接口