DOM与CSS样式表
在前文 《DOM与元素节点内联样式》中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表。
CSS 样式表概况
通过使用 HTMLLinkElement 节点引入外部样式表,或者使用 HTMLStyleElement 节点来定义内联样式表,都可以添加样式表到 HTML 文档。在如下 HTML 文档中,这两种 Element 节点都在 DOM 中,并且我们可以验证哪个构造器构造了这些节点。
<link id='linkElement' href='h.css' rel='stylesheet' type='text/css'>
<style id='styleElement'>
div {
background-color: black;
}
</style>
<script>
// 输出 function HTMLLinkElement() { [native code] }
console.log(document.querySelector('#linkElement').constructor);
// 输出 function HTMLStyleElement() { [native code] }
console.log(document.querySelector('#styleElement').constructor);
</script>
一有样式表添加到 HTML 文档中,它即表示为 CSSStyleSheet 对象。样式表里每条 CSS 规则(如 div {background-color: black;}
)都表示为一个 CSSStyleRule 对象。在如下代码中,我们可以验证是哪个构造器构造了样式表中的每个 CSS 规则。
<link id='linkElement' href='h.css' rel='stylesheet' type='text/css'>
<style id='styleElement'>
div {
background-color: black;
}
</style>
<script>
// 输出 function CSSStyleSheet() { [native code] }
console.log(document.querySelector('#linkElement').sheet.constructor);
// 输出 function CSSStyleRule() { [native code] }
console.log(document.querySelector('#styleElement').sheet.cssRules[0].constructor);
</script>
记住,选取引入样式表的元素(即 <link>
或 <style>
)与访问表示样式表自身的实际对象(CSSStyleSheet)是不同的。
CSSStyleSheet 对象
在上一小节中,我们知道了如何获取一个 CSSStyleSheet 对象的引用(例如 document.querySelector('#linkElement').sheet
),而 document.styleSheets 则提供了一个包含 HTML 文档中所有样式表对象(即 CSSStyleSheet 对象)列表的访问方式,包括显式链接(即<link>
)和内嵌(即<style>
)。
<link id='linkElement' href='h.css' rel='stylesheet' type='text/css'>
<style id='styleElement'>
div {
background-color: black;
}
</style>
<script>
console.log(document.styleSheets.length); // 2
console.log(document.styleSheets[0]); // <link>
console.log(document.styleSheets[1]); // <style>
</script>
我们可以将 CSSStyleSheet 对象所拥有的属性和方法打印出来看看:
console.log(document.styleSheets[0]); // <link>
console.log(document.styleSheets[1]); // <style>
// <link>
cssRules: null
disabled: false
href: "file:///C:/Users/wwwy/Desktop/h.css"
media: MediaList
ownerNode: link#linkElement
ownerRule: null
parentStyleSheet: null
rules: null
title: null
type: "text/css"
// <style>
cssRules: CSSRuleList
disabled: false
href: null
media: MediaList
ownerNode: style#styleElement
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList
title: null
type: "text/css"
我们对比后发现,内联样式表和外部引入的样式表是有区别的,最主要的区别就是内联样式表能用 cssRules 属性获取具体的 css 样式代码,继而能对它们进行操作,而外部引入的样式表则不行,仔细想想也有一定道理,毕竟外部的文件,我们怎么能随意对它们进行操作呢?接下去介绍几个重要的属性:
- disabled: 表示样式表是否被禁用的布尔值
- cssRules: 样式表中包含的样式规则的集合。IE 不支持这个属性,但有一个类似的 rules 属性
CSSStyleRule 概况
很显然,CSSStyleRule 才是本文的重点。CSSStyleRule 代表了样式表中所含的每条 CSS 规则。基本上,CSSStyleRule 即附加到某个选择器的 CSS 属性与值的接口。
<style id='styleElement'>
div {
background-color: black;
width: 100px;
height: 100px;
}
</style>
<script>
var sSheet = document.querySelector('#styleElement').sheet;
// 输出 div { background-color: black; width: 100px; height: 100px; }
console.log(sSheet.cssRules[0].cssText);
</script>
我们来看看 CSSStyleRule有哪些属性和方法:
<style id='styleElement'>
div {
background-color: black;
width: 100px;
height: 100px;
}
</style>
<script>
var sSheet = document.querySelector('#styleElement').sheet;
console.log(sSheet.cssRules[0]);
// cssText: "div { background-color: black; width: 100px; height: 100px; }"
// parentRule: null
// parentStyleSheet: CSSStyleSheet
// selectorText: "div"
// style: CSSStyleDeclaration
// type: 1
</script>
CSSStyleRule之操作样式
当然,对于开发人员来说,如何用 CSSStyleRule 来获取和操作样式才是最重要的。
- 使用 insertRule() 和 deleteRule() 来插入与删除样式表中的 CSS 规则
insertRule() 和 deleteRule() 方法提供了以编程方式操作样式表中 CSS 规则的能力。
<style id='styleElement'>
div {
background-color: black;
width: 100px;
height: 100px;
}
</style>
<script>
var sSheet = document.querySelector('#styleElement').sheet;
// 输出 div { background-color: black; width: 100px; height: 100px; }
console.log(sSheet.cssRules[0].cssText);
// 在行内样式表中索引0的位置添加新规则
// 原来该位置的行内样式被移到了索引为1的位置
sSheet.insertRule('p{color:red}', 0);
console.log(sSheet.cssRules.length); // 2
// 输出 p { color: red; }
console.log(sSheet.cssRules[0].cssText);
// 删除添加的规则
sSheet.deleteRule(0);
console.log(sSheet.cssRules.length); // 1
// 输出 div { background-color: black; width: 100px; height: 100px; }
console.log(sSheet.cssRules[0].cssText);
</script>
- 使用
.style
属性修改 CSSStyleRule 的值
正如我们有 .style
属性用于操作元素节点的内联样式,我们在 CSSStyleRule 对象上也有 .style
属性编排了在样式表上做相同的操作。
<style id='styleElement'>
div {
background-color: black;
width: 100px;
height: 100px;
}
</style>
<script>
var sSheet = document.querySelector('#styleElement').sheet;
sSheet.cssRules[0].style.width = '200px';
// 输出 div { background-color: black; width: 200px; height: 100px; }
console.log(sSheet.cssRules[0].cssText);
</script>
- 创建新的内联样式表
要在 HTML 页面加载完毕后打造一个新的样式表,我们只能创建一个新的 节点。
var styleElem = document.createElement('style');
styleElem.innerHTML = 'body{color:red}';
document.querySelector('head').appendChild(styleElem);
- 以编程方式添加外部样式表到 HTML 文档
要以编程方式添加 CSS 文件到 HTML 文档,你需要创建一个 <link>
元素节点,给它合适的属性值,然后将它添加到 DOM 树。
var linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('type', 'text/css');
linkElem.setAttribute('id', 'linkElement');
linkElem.setAttribute('href', '//..');
document.head.appendChild(linkElem);
本文参考文献:
- 《Javascript高级程序设计》
- 《DOM 启蒙》
DOM与CSS样式表的更多相关文章
- 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性
如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...
- Chrome开发工具Elements面板(编辑DOM和CSS样式)详解
Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- JavaScript访问修改css样式表
1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
随机推荐
- 【英文版本】Android开源项目分类汇总
Action Bars ActionBarSherlock Extended ActionBar FadingActionBar GlassActionBar v7 appcompat library ...
- javascript-单例模式
单例模式笔记 也称为单体模式,只允许实例化一次的对象类 用法: 1.命名空间:用一个对象来规划一个命名空间,井井有条的管理对象上的属性和方法 2.静态变量管理:让创建的函数 ...
- 论Top与ROW_NUMBER读取第一页的效率问题
10.29 前一段时间研究关于分页的问题,由于数据库属于百万级的,考虑了关于优化方面的问题.其中一个考虑是:第一页展现的频率肯定是最高的,所以我想第一页就使用Top N来读取. 这个想法本身是没有错, ...
- Java api 入门教程 之 JAVA的包装类
Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...
- 烂泥:apache虚拟主机的学习与应用
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 要配置apache的虚拟主机,我们需要分以下几步进行: 1. 检查apache虚拟主机模块 2. 开启apache虚拟主机功能 3. httpd-vho ...
- 高性能MySQL笔记 第5章 创建高性能的索引
索引(index),在MySQL中也被叫做键(key),是存储引擎用于快速找到记录的一种数据结构.索引优化是对查询性能优化最有效的手段. 5.1 索引基础 索引的类型 索引是在存储引擎层而 ...
- cookie工具类,解决servlet3.0以前不能添加httpOnly属性的问题
最近在解决XSS注入的问题,由于使用的servlet版本是2.5,不支持httpOnly的属性,故做了个工具类来实现cookie的httpOnly的功能.全类如下: /** * cookie工具类,解 ...
- netfilter-在内核态操作网络数据包
一.概述 netfilter是自2.4内核的一个数据包过滤框架.可以过滤数据包,网络地址和端口转换 ...
- Addthis使用
一.使用 https://www.addthis.com/.国外的SNS分享站点较多,适用于英文站点内容的分享.有教程. 我的测试代码如下: <html> <meta charset ...
- 组合使用css选择器
今天看到有网站使用.classA.classB类似的选择器,不知道是否有人和我一样没有用过,所以了解一下,以下记录. 一.用法介绍 在css中.classA.classB指的是一个元素,同时满足cla ...