跳到主要内容

添加指令和规则

用户可以在样式表中添加，或添加@import 指令和规则。

添加@import 指令​

一旦获得对某个 styleSheet 对象的引用，就可以使用 addImport()方法向该样式表中添加一个@import 指令，语法格式如下：

iIndex = styleSheet.addImport(sURL [, iIndexRequest])

参数 sURL 是要导入样式表的 URL 地址。

参数 iIndexRequest 是可选的，为一个整数，用来定义添加的@import 指令在 styleSheet.imports 列表中的索引位置。如果忽略该参数，那么@import 指令就被追加到列表的末尾。

该方法的返回值是添加的@import 指令在 styleSheet.imports 列表中实际的索引位置。

使用索引号，还可以使用 removeImport()方法从 styleSheet.imports 列表中删除一个@import 指令，该方法的语法格式如下：

styleSheet.removeImport(iIndex);

添加规则​

向样式表中添加一个规则可以使用 addRule()方法，该方法的语法格式如下：

iIndex = styleSheet.addRule(sSelector,sStyle[,iIndexRequest])

参数 sSelector 是一个字符串，用来定义新规则的选择符。

参数 sStyle 用来定义样式，它是一个字符串，而非 style 对象。可以像为对象定义内联样式那样定义该参数，例如下面的代码：

var iIndex = styleSheet.addRule('div', 'color:#FF0000;font-weight:bold;');

返回值是新增样式规则的索引号。

参数 iIndexRequest 是可选的，默认值为-1。

使用索引号，还可以使用 removeRule()方法从 styleSheet.imports 列表中删除一个规则，该方法的语法格式如下：

styleSheet.removeRule([iIndex]);

样式表相关对象​

  • document.styleSheets 列表可以访问 styleSheet 对象
  • styleSheet.rules 列表可以访问 ruleList 象注意 imports 列表有些变化）
  • rule.style 对象可以访问样式，或者，元素对象的 style 属性也可以获得 style 对象

为不同介质定义样式​

使用 styleSheet 对象的 media 属性，可以获取某个样式表所指定要用于的介质，也可以使用该属性将样式表指定给要使用的介质。该属性有3个值可供选择：

  • screen ，该字符串表示的介质类型是计算机屏幕
  • print ，该字符串表示的介质类型是打印机
  • all ，该字符串表示适用于所有介质，这也是默认值

例如下面的代码，首先获取样式表，而后设置该样式表适用的介质是计算机屏幕：

var oStyleSheet = document.styleSheets[0]; // 获取 style 元素定义的样式表
oStyleSheet.media = 'screen';

关于处理@page 规则​

@page 规则用来定义页面的样式，要处理该样式，可以使用 styleSheet 对象的 pages 属性返回该样式表中所有的@page 规则定义。这是一个列表，对象中每个元素就是一个@page 规则，每个@page 规则使用 page 对象来描述。

page 对象有两个属性成员可用：

  • page.selector 属性用来获取@page 规则中定义的选择符名称
  • page.pseudoClass 属性用来获取@page 规则中定义的伪类选择符名称，包括:first 、:left 和:right

不过，对于每个选择符中定义的规则，用户不可以获取，也就不能访问样式。如果要访问样式，可以使用 styleSheet 对象的 cssText 属性获得该样式表中规则和样式的文本表述，也可以使用该属性改变样式表中的规则和样式。例如下面的代码：

<head>
  <style type="text/css">
    #page:left {
      margin-left: 4cm;
      margin-right: 3cm;
    }
    #page:right {
      margin-left: 4cm;
      margin-right: 3cm;
    }
  </style>
</head>

<body>
  <script>
    var oStyleSheet = document.styleSheets[0];
    //获取 style 元素定义的样式表
    alert(oStyleSheet.cssText);
  </script>
</body>