「CSS」DOM2 级款式

2024年3月8日 109次阅读 来源: JasonKidd

对象范例

CSSStyleSheet

示意的是运用 <link> 链接的外部款式表，也可所以 <style> 定义的嵌入式款式表。

var sheets = document.styleSheets; // 一切的 CSSStyleSheet 对象

var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet; // IE8- 中是 .styleSheet

注重一下，假如 <link> 的 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)。

CSSStyleRule

CSS 款式表的每一条纪录都邑示意成一个 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，这个对象是它表现出来的款式（即经由过程层叠以后的款式）。

    原文作者：JasonKidd
    原文地址: https://segmentfault.com/a/1190000003704135
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞