摘要:设置为可以禁用此样式表。仅是被导入的样式表拥有,指向使用导入该样式表的样式表。样式表的每一条记录都会表示成一个对象,比如就会产生两个对象。样式遍历对于内联样式表的属性进行遍历,即对的属性进行遍历。
对象类型 CSSStyleSheet
表示的是使用 链接的外部样式表,也可以是 定义的嵌入式样式表。
var sheets = document.styleSheets; // 所有的 CSSStyleSheet 对象 var link = document.getElementsByTagName("link")[0]; var sheet = link.sheet; // IE8- 中是 .styleSheet
注意一下,如果 的 rel 属性不是 stylesheet 的情况下,是无法获取 sheet 属性的。
重要的属性有:
sheet: 对应的 CSSStyleDeclaration 对象。
disabled: 设置为 true 可以禁用此样式表。
link: 外部样式表是 URL 地址,内嵌样式表是 null。
parentStyleSheet: 仅是被 @import 导入的样式表拥有,指向使用 @import 导入该样式表的样式表。
cssRules: CSSStyleRule 对象集合。
重要的方法有:
deleteRule(index): 删除 index 处的 Rule。 IE8- 为 removeRule(index)。
insertRule(selectorText + "{" + cssText + "}" , index): 向指定位置插入一条 Rule,内容为 selectorText + "{" + cssText + "}"。IE8- 为 addRule(selectorText, cssText, index)。
CSSStyleRuleCSS 样式表的每一条记录都会表示成一个 CSSStyleRule 对象,比如:
div .relative { position: relative; } #sidebar { float: left; }
就会产生两个 CSSStyleRule 对象。
这个对象主要使用的属性有以下几个:
cssText: 样式的内容,不包括选择器文本和花括号。 IE8-不支持。
style: 这个条目的 CSSStyleDeclaration 对象。
selectorText: 返回当前选择器的文本,即上面的div .relative 和 #sidebar。
作者认为,使用上面的 CSSStyleSheet.cssRules 结合这个对象的 selectorText 属性可以查找到某一个特定的样式,进而进行更改。
CSSStyleDeclaration所有支持 style 属性的 HTML 元素的 HTMLElement 对象都有一个 style 属性。这个属性包含着所有通过标签中 style 属性指定的样式信息,但不包括外部样式表和内嵌样式表的样式信息。
style 属性的属性与样式一一对应,通过设置相应的属性便可以达到控制样式的目的。
使用短划线的属性,例如 font-size,对应的属性名就是它的驼峰命名形式,即 .fontSize。
由于 float 是 JavaScript 的关键字,不能直接使用,故使用 .cssFloat 代替(IE8- 中是 .styleFloat)。
var el = document.getElementById("div1"); el.style.width = "100px"; el.style.cssFloat = "left"; el.style.backgroundImage = "url(/images/logo.png)"
属性和方法:
length: 所有已经设置了值的属性个数。
getPropertyValue(propName): 获得某个属性的值,未设置返回 null。
getPropertyPriority(propName): 检测某个属性是否设置了 !important,是返回 "important",否返回 ""。
removeProperty(propName): 删除属性。
setProperty(propName, value, "important" | ""): 设置某个属性的值和优先级。
对于内联样式表的属性进行遍历,即对 HTMLElement 的 .style 属性进行遍历。
也许你们会想,使用 for in 遍历不就可以了吗?真是这么简单便不会来说了。
CSSStyleDeclaration 属性即使对于没有设置的值也是有定义的,故所有的属性在这个对象里面都有定义,故不能使用 for in。
但是这个对象提供给了我们一种方式,它将所有赋值了的属性全部使用 数字:属性名 映射在对象中。在上面也提到,length 属性是所有已赋值的属性的个数。那么我们可以使用如下方法遍历。
var style = document.getElementById("sidebar").style; for(var i = 0; i < style.length; i++) { console.log(style[i] + ": " + style[style[i]]); }
仅仅是获得非常少的样式信息并不是我们所需要的,如何获得这个元素的所有样式信息,包括外部样式表,内嵌样式表,内联样式表,浏览器默认样式?
IE9+ 以及其他现代浏览器提供给了我们 window.getComputedStyle(el) 函数。
传入一个 DOM 元素,返回一个 CSSStyleDeclaration,这个对象是它表现出来的样式(即通过层叠之后的样式)。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111125.html
摘要:扩展选择符的核心是两个方法和。目前已完全支持的浏览器有和。在写模式下,会根据指定的字符串创建新的子树,然后用这个子树完全替换调用元素。在删除带有事件处理程序或引用了其他对象子树时,就有可能导致内存占用问题。删除集合中指定位置的规则。 DOM扩展 选择符API Selectors API Level 1 的核心是两个方法:querySelector()和querySelectorAll(...
摘要:对象包含下列属性返回整条规则对应的文本包括选择符和花括号返回当前规则的选择符一个对象返回规则中所有的样式当前规则所属的样式表表示规则类型的常量值。从文档中分离解除引用推荐在使用完范围后再执行上述两个步骤。 DOM1级主要定义了HTML和XML文档的底层结构,DOM2和DOM3则在DOM1的基础上引入了更多的交互功能,支持了更高级的XML特性。DOM2和DOM3分为许多模块(模块之间具...
摘要:设置为可以禁用此样式表。仅是被导入的样式表拥有,指向使用导入该样式表的样式表。样式表的每一条记录都会表示成一个对象,比如就会产生两个对象。样式遍历对于内联样式表的属性进行遍历,即对的属性进行遍历。 对象类型 CSSStyleSheet 表示的是使用 链接的外部样式表,也可以是 定义的嵌入式样式表。 var sheets = document.styleSheets; // 所有的 ...
摘要:如果不需要伪元素信息,第二个参数可以输操作样式表类型表示的是样式表,包括通过元素包含的样式表和在元素中定义的样式表表示样式表是否被禁用的布尔值。包括元素的高度可见的水平滚动条的高度上边框高度和下边框高度。显示处理指令节点。 DOM2和DOM3 DOM变化 针对XML命名空间的变化 有了XML命名空间,不同XML文档的元素就可以混合在一起,共同构成格式良好的文档,而不必担心发生命名冲突...
摘要:中的所有对象都是以对象的形式实现的。这意味着中的对象与原生对象的行为或活动特点并不一致。该属性指向表示整个文档的文档节点。同时由要插入的节点占据其位置。返回被移除的节点。操作类名操作类名时,需要通过属性添加删除和替换类名。 Note:IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生Javascript对象的行为或活动特点并不一致。 DOM1级主要定义...
阅读 2568·2021-11-24 09:38
阅读 2601·2019-08-30 15:54
阅读 914·2019-08-30 15:52
阅读 1906·2019-08-30 15:44
阅读 2711·2019-08-30 13:48
阅读 767·2019-08-29 16:21
阅读 995·2019-08-29 14:03
阅读 2210·2019-08-28 18:15