Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表
操作样式表
在JS中样式表用一种类型来表示,以便我们在JS对其进行操作
这一类型就是CSSStyleSheet 即CSS样式表类型,包括了之前 style 对象所不包括的外部样式表以及嵌入样式表
其中<link>以HTMLLinkElement 类型表示
而<style> 以HTMLStyleELement类型表示
但是这两类样式表更加通用的类型则是继承自 StyleSheet 类型的 CSSStyleSheet
其中继承自 StyleSheet 类型的有以下属性:
disabled:表示样式表是否被禁用,该属性可写
href:若是通过<link>引入的样式表,该属性的值则为样式表的 URL 否则为 null
media:当前样式表支持的媒体集合类型,若该集合为空列表则表示样式表适用于所有媒体
ownerNode:指向拥有当前样式表的节点的指针,若样式表通过 @import 导入则该属性的值为 null
parentStyleSheet:若当前样式表通过 @import 引入则指向引入它的样式表
title:ownerNode中的title属性的值
type:表示样式表类型的字符串,如“type/css”
cssRules:样式表中包含样式规则的集合
ownerRule:若通过@imoprt 引入则指向导入的规则
deleteRule(index):删除cssRules中指定位置的规则
insertRule(rule,index):向cssRules指定位置插入规则
至于每个文档的StyleSheet类型则可以通过以下代码访问
document.styleSheets[i]
每个styleSheet类型则都拥有以上的属性和方法
CSS规则
CSSRule 对象表示样式表中的每一条规则
CSSRule 是一个供其它多种类型继承的基类,其中CSSStyleRule就继承自该基类,用于表示样式表信息
CSSStyleRule拥有以下属性:
- cssText:返回整条规则的对应文本
- parentRuel:如果当前规则是导入的规则,则这个属性就是导入的规则,否则为null
- parentStyleSheet:当前规则所属样式表
- selectorText:返回当前规则的选择符文本
- style:一个CSSStyleDeclaration 对象,可以通过该对象修改设置和取得规则中的值
- type:表示规则类型的常量值,对于CSS规则来说该值为1
PS. 这里的cssText属性与style对象的cssText存在差异,也就是这里的cssText不能进行写操作,而style对象的cssText可以被重写
这里和style对象的区别在于,style修改的样式只应用于当前元素,而CSSRule修改的规则则会应用于所有被选择符选中的元素
创建规则
DOM规定要向现有样式表添加规则需使用 insertRule()方法
该方法接收两个参数,规则、插入规则的位置
document.styleSheets[0].insertRule("body{background-color:red}",0);
上述代码表示向当前文档的第一个样式表插入一条规则将body的背景颜色设置为红色
低版本IE不支持该方法,但支持另一种类似的实现:
document.styleSheets[0].addRule("body","background-color:red",0);//IE8及以下
并且addRule添加的规则有限制,最多添加4095条样式规则,超出该上限的调用将会导致错误
删除规则
非低版本IE:
document.styleSheets[0].deleteRule(0);//删除第一个样式表的第一条规则
低版本IE:
document.styleSheets[0].removeRule(0);// IE8及以下
跨浏览器写法
针对上方添加、删除的差异可以使用以下跨浏览器写法:
// 参数:1.样式表 2.选择符 3.css规则文本 4.插入位置
function insertRule(sheet, selectorText, cssText, position){
if(sheet.insertRule){
sheet.insertRule(selectorText + "{" + cssText +"}",position);
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
} // 参数 1.样式表 2.要删除规则的位置
function deleteRule(sheet,index){
if(sheet.deleteRule){
sheet.deleteRule(index);
}else if(sheet.removeRule){
sheet.removeRule(index);
}
}
Javascript高级编程学习笔记(51)—— DOM2和DOM3(3)操作样式表的更多相关文章
- Javascript高级编程学习笔记(82)—— 富文本操作(2)
操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 ...
- 《JavaScript高级程序设计》笔记:DOM2和DOM3(十二)
DOM1级主要定义的是HTML和XML文档的底层结构.DOM2级和DOM3级在这个结构基础上引入了更多的交互能力,也支持更高级的XML特性.为此DOM2级和DOM3级分为了很多的模块(模块直接具有某种 ...
- Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
- Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...
- Javascript高级编程学习笔记(61)—— 事件(5)UI事件
UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...
- Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历
遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...
- Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择
范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...
- Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小
在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...
- Javascript高级编程学习笔记(50)—— DOM2和DOM3(2)样式
样式 在HTML中定义元素的方式有以下三种: 1.link标签引入外部样式表 2.style标签定义嵌入样式 3.通过JS中对style特性定义元素样式(行内样式) “DOM2级样式”围绕上述样式机制 ...
随机推荐
- springmvc webservlet 异步请求总结
1:每次请求会启动一个新线程 上边在debug状态下, 每次请求一次,生成一个新的 thread 在此已经是245了 出现一个现象在debug模式下, 每次请求生成的线程,自动在红框那个位置停了下来 ...
- Linux-01初级学习
刚刚接触 Linux学习中的一点笔记`02 ps:自己学习过程中的记录,略菜,给没学过的纯小白 配置网络 1.虚拟网卡 2.虚拟机服务 我的电脑-->管理-->服务 3.修改网络配置文件 ...
- sqlite基本用法
DDL-数据定义语言 CREATE 创建一个新的表,一个表的视图,或者数据库中的其他对象. ALTER 修改数据库中的某个已有的数据库对象,比如一个表. DROP 删除整个表,或者表的视图,或者数据库 ...
- Maven中阿里云私服配置
在国内maven仓库连接速度太慢 ,虽然对于很多互联网企业和大中型软件公司,建个镜像是分分钟的事.但对于个人开发者确实是个问题.解决办法可以用阿里云的MAVEN私服.有两种方法: 1.在$MAVEN_ ...
- SqlSever 使用 CROSS APPLY 与 OUTER APPLY 连接查询
前言 日常开发中遇到多表查询时,首先会想到 INNER JOIN 或 LEFT OUTER JOIN 等等,但是这两种查询有时候不能满足需求.比如,左表一条关联右表多条记录时,我需要控制右表的某一条或 ...
- 使用nginx反向代理实现隐藏端口号
使用nginx反向代理实现隐藏端口号 在服务器上下载安装nginx,主要是修改配置nginx.conf. 用proxy_pass里面配置要转发的域名+端口,相当于这一部分是被域名替换的部分,在http ...
- UVA 10944 Nuts for nuts..
题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=21&p ...
- Idea搭建SpringMVC框架(初次接触)
公司转Java开发,做的第一个项目是SpringMVC框架,因为底层是同事封装,等完成整个项目,对SpringMVC框架的搭建还不是很了解,所以抽时间不忙的时候自己搭建了一个SpringMVC框架. ...
- sql server 2008 64位连接sql 2000服务器的时候出现
来源 https://blog.csdn.net/loeley/article/details/7095741 sql server 2008 64位连接sql 2000服务器的时候出现以下提示: 链 ...
- JavaWeb(一)-Servlet中的Config和Context
一.ServletConfig对象 1.1获取一个servletConfig对象 1)通过初始化方法获得一个servletconfig 2)通过继承父类(GenericServlet.)得到一个ser ...