在前文 《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 样式代码,继而能对它们进行操作,而外部引入的样式表则不行,仔细想想也有一定道理,毕竟外部的文件,我们怎么能随意对它们进行操作呢?接下去介绍几个重要的属性:

  1. disabled: 表示样式表是否被禁用的布尔值
  2. 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);

本文参考文献:

  1. 《Javascript高级程序设计》
  2. 《DOM 启蒙》

DOM与CSS样式表的更多相关文章

  1. 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性

    如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...

  2. Chrome开发工具Elements面板(编辑DOM和CSS样式)详解

    Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不 ...

  3. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  4. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  5. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  7. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  8. HTML基础(三)——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  9. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

随机推荐

  1. 【英文版本】Android开源项目分类汇总

    Action Bars ActionBarSherlock Extended ActionBar FadingActionBar GlassActionBar v7 appcompat library ...

  2. javascript-单例模式

    单例模式笔记   也称为单体模式,只允许实例化一次的对象类   用法:      1.命名空间:用一个对象来规划一个命名空间,井井有条的管理对象上的属性和方法      2.静态变量管理:让创建的函数 ...

  3. 论Top与ROW_NUMBER读取第一页的效率问题

    10.29 前一段时间研究关于分页的问题,由于数据库属于百万级的,考虑了关于优化方面的问题.其中一个考虑是:第一页展现的频率肯定是最高的,所以我想第一页就使用Top N来读取. 这个想法本身是没有错, ...

  4. Java api 入门教程 之 JAVA的包装类

    Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表,这样八个和基本数 ...

  5. 烂泥:apache虚拟主机的学习与应用

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 要配置apache的虚拟主机,我们需要分以下几步进行: 1. 检查apache虚拟主机模块 2. 开启apache虚拟主机功能 3. httpd-vho ...

  6. 高性能MySQL笔记 第5章 创建高性能的索引

    索引(index),在MySQL中也被叫做键(key),是存储引擎用于快速找到记录的一种数据结构.索引优化是对查询性能优化最有效的手段.   5.1 索引基础   索引的类型   索引是在存储引擎层而 ...

  7. cookie工具类,解决servlet3.0以前不能添加httpOnly属性的问题

    最近在解决XSS注入的问题,由于使用的servlet版本是2.5,不支持httpOnly的属性,故做了个工具类来实现cookie的httpOnly的功能.全类如下: /** * cookie工具类,解 ...

  8. netfilter-在内核态操作网络数据包

    一.概述                                                    netfilter是自2.4内核的一个数据包过滤框架.可以过滤数据包,网络地址和端口转换 ...

  9. Addthis使用

    一.使用 https://www.addthis.com/.国外的SNS分享站点较多,适用于英文站点内容的分享.有教程. 我的测试代码如下: <html> <meta charset ...

  10. 组合使用css选择器

    今天看到有网站使用.classA.classB类似的选择器,不知道是否有人和我一样没有用过,所以了解一下,以下记录. 一.用法介绍 在css中.classA.classB指的是一个元素,同时满足cla ...