`
bjsunrose
  • 浏览: 57214 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Document.styleSheets 对象集合介绍

 
阅读更多
/**    * 得到 styleSheets:方法    * @return Array of styleSheet     */      function getDocStyleSheets(){        var doc_styleSheets=document.styleSheets;     return doc_styleSheets;      }         var css01=getDocStyleSheets()[0];//得到文档中关联的第一个stylesheet片段对象.   /*   stylesheet对象   对于Firefox公开的对象:   type    disabled   ownerNode   parentStyleSheet   href   title   media   ownerRule   cssRules   insertRule    deleteRule   _____________________________________________   stylesheet对象   对于IE公开的对象:   owningElement    pages    id    type    href    disabled    cssText    readOnly    title    parentStyleSheet    imports    rules    media   兼容IE&FireFox的对象:    disabled --> 是否启用此css定义片段    e g.    css01.disabled=true;    这时当前文档讲忽略css01的css定义        rules-->css定义集合[IE专有],可读写    cssRules-->css定义规则集合[Firefox专有]可读写    e g.    var css01_Rules=css01.rules||css01.cssRules;    css01_Rules.style.fontSize='12px';    这时候将改变css定义中body{    font-size:14px;    }    页面所有文字大小讲改变。   */
这种应用可以应用在对于页面大量dom元素的渲染操作。非常节省客户端资源。免除了遍历DOM节点。免除了给每个dom节点设置特定的id或className
著名js框架mootools对document.styleSheets的应用:
分享到:
评论

相关推荐

    document.styleSheets[0].rules 与 cssRules区别

    为此,JavaScript提供了一系列API,其中包括`document.styleSheets`对象及其相关的属性。本文将重点探讨`document.styleSheets[0].rules`与`cssRules`的区别。 #### 一、基本概念 1. **`document.styleSheets`**:...

    document.styleSheets[0].disabled

    在JavaScript中,通过Document对象的styleSheets属性可以获取到当前文档中的样式表集合(StyleSheetList),而document.styleSheets[0]则是访问这个集合中的第一个样式表对象。通过修改这个样式表对象的disabled属性...

    js 动态修改css文件用到了cssRule

    首先,我们需要理解`document.styleSheets`这个属性。它是浏览器提供的一个全局对象,包含了页面中所有内联、内部和外部样式表的引用。通过索引,例如`document.styleSheets[4]`,我们可以访问到特定的样式表。在这...

    document 文挡对象详解

    - `document.styleSheets`:返回文档中所有样式表的列表。 - `getComputedStyle()`:返回元素在屏幕上的实时计算样式。 7. **表单操作** - `document.forms`:返回文档中所有`<form>`元素的集合。 - `document....

    DOCUMENT的对象操作

    - `styleSheets`: 提供了与文档中的CSS相关的样式表集合。 4. **事件处理**: - 这些事件处理属性(如`onactivate`, `onclick`)是JavaScript中的事件监听器,当特定的用户交互发生时,它们可以触发函数来响应...

    js获取样式表里面的内容

    如果样式存在于`<style>`标签中,我们可以遍历`document.styleSheets`来访问。这个集合包含了所有内部样式表和外部样式表的引用。例如: ```javascript for (var i = 0; i < document.styleSheets.length; i++) { ...

    JavaScript常用技巧

    30. **样式表操作**:`document.styleSheets[0]` 访问第一个样式表,`document.styleSheets[0].rules[0]` 访问第一个样式规则。 31. **防止点击空链接**:通过在链接中使用`javascript:void(0)`或`javascript:...

    第六章 使用DOM操作样式表

    DOM提供了一些接口来访问和操作样式表,如`document.styleSheets`集合,它包含了所有链接和内嵌的样式表。每个样式表对象都有`rules`或`cssRules`属性,这些规则对象包含了样式表中的所有CSS规则。 5. **CSS选择器...

    关于读取style元素定义样式表的兼容问题实例探讨

    文档中提到的读取style元素定义样式表的兼容问题,主要集中在不同浏览器对于document.styleSheets对象及其属性的支持差异上。 首先,document.styleSheets是一个在DOM中用于表示样式表信息的集合。它包含了页面中...

    JavaScript小技巧

    18. **样式表处理**:`document.styleSheets`对象提供对页面样式表的访问,`document.styleSheets[0].rules[0]`获取第一条样式规则。 19. **防止空链接导致页面滚动**:在空链接`<a>`标签中使用JavaScript事件处理...

    javascipt技巧大全

    10. **HTML 标签和样式**:`document.documentElement.innerHTML`返回整个HTML文档的HTML代码,`document.styleSheets`集合包含所有样式表,`document.styleSheets[0].rules[0]`则可以访问第一个规则。 11. **选中...

    常用JavaScript

    12. **样式获取**:`obj.style.cssText`获取元素的内联样式,`document.styleSheets`访问所有样式表,`document.styleSheets[0].rules[0]`获取第一条样式规则。 13. **页面导航**:`location.search()`获取URL的...

    JavaScript中一些常用的小技巧

    12. 查找对象:`document.getElementsByName("r1")` 用于选取具有指定名称的元素集合,`document.getElementById(id)` 则用于选取ID为指定值的元素。 13. 定时器:`timer = setInterval('scrollwindow()', delay);`...

    JavaScript访问样式表代码

    由于浏览器兼容性问题,我们需要使用 `document.styleSheets` 集合来访问样式表。这个集合包含了页面中所有样式表的引用。例如: ```javascript var oCSSRules; oCSSRules = document.styleSheets[0].cssRules ||...

    javascriptDom节点API个人总结.docx

    - **`document.styleSheets`** 返回一个 CSSStyleSheet 对象数组,包含了当前文档中的所有样式表。 #### 文档信息属性 - **`document.documentURI`** 返回当前文档的 URL,等同于 `document.URL`。 - **`...

    javascript小技巧.doc

    40. **style标签里的第一个样式**:`document.styleSheets[0].rules[0]` 访问样式规则。 41. **防止空链接页面重置**:`()">word</a>` 阻止空链接导致的页面跳转。 42. **上一网页来源**:在ASP中,`request....

    js代码实用大全

    40. **style标签里的第一个样式规则**: 对于CSS规则,可以使用类似 `document.styleSheets[0].cssRules[0]` 的方式访问。 这些JavaScript代码示例覆盖了从基本的事件处理到复杂的DOM操作和样式修改等多个方面,对于...

    javascript实用代码大全

    - `document.styleSheets[0]`: 获取样式表对象。 #### 3. 页面控制 - **定时器**: - `timer=setInterval('scrollwindow()',delay)`: 设置定时器。 - `clearInterval(timer)`: 清除定时器。 - **页面跳转与刷新*...

    超级实用且不花哨的js代码大全

    41. **样式表**:`document.styleSheets[0]`获取第一个样式表,`document.styleSheets[0].rules[0]`获取第一条样式规则。 42. **防止空链接跳转**:在链接中使用`javascript:`函数防止页面重置。 43. **上一页源**...

Global site tag (gtag.js) - Google Analytics