【EASYDOM系列教程】之获取内联样式

回顾什么是内联样式

所谓内联样式，就是通过 HTML 页面元素的 style 属性为当前元素定义 CSS 样式。

以下代码示例，就是通过 style 属性定义 CSS 内联样式:

<p style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>

值得注意的是:

• HTML 页面的结构与样式并没有有效分离
• 定义的 CSS 样式只针对当前元素有效

获取内联样式

由于设置内联样式的方式是利用 HTML 页面元素的 style 属性实现的，所以获取内联样式主要是依靠 DOM 中获取属性方式实现。

• Element 对象的 getAttribute() 方法获取 style 属性的值。
• 通过 DOM 对象 HTMLElement 的 style 属性获取。

Element 对象的 getAttribute() 方法

Element 对象的 getAttribute() 方法的语法结构如下:

var value = element.getAttribute('style');

以上语法结构中调用 getAttribute() 方法的 element 表示 HTML 页面元素，传递的参数 style 表示属性名称，而返回值则是指定属性名对应的值（内联样式的声明内容）。

我们可以通过以下示例代码，学习如何通过 getAttribute() 方法获取内联样式:

<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>
<script>
    var pElem = document.getElementById('p1');
    var style = pElem.getAttribute('style');
    console.log(style);
</script>

上述示例代码的输出结果如下:

DOM 对象的 style 属性

由于 DOM 规范标准中将 Document 对象定位的 HTML 页面元素解析为相应的对象，而这些对象都继承于 HTMLElement 对象。该对象提供了 style 属性，返回 CSSStyleDeclaration 对象。

我们可以通过以下示例代码，学习如何通过 HTMLElement 对象的 style 属性获取内联样式:

<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>
<script>
    var pElem = document.getElementById('p1');
    var style = pElem.style;
    console.log(style);
</script>

上述示例代码，通过 style 属性会得到 CSSStyleDeclaration 对象，该对象表示一个 CSS 属性键值对的集合。

CSSStyleDeclaration 对象

通过 element.style 返回的是 CSSStyleDeclaration 对象。CSSStyleDeclaration 对象表示一个CSS属性键值对的集合。

CSSStyleDeclaration 对象提供的属性和方法可以帮助我们获取 CSS 样式的具体内容。

属性或方法	描述
cssText	声明块的文本内容。
length	属性的数量。
item()	返回属性名。 例如: nameString= styleObj.item(0) Alternative: nameString= styleObj[0]
getPropertyValue()	返回属性值。例如: valString= styleObj.getPropertyValue('color')

cssText 属性

通过 element.style.cssText 属性获取 CSS 声明块的文本内容。

我们可以通过以下示例代码，学习如何通过 cssText 属性获取 CSS 声明块的文本内容:

<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>
<script>
    var pElem = document.getElementById('p1');

    var styleDeclar = pElem.style;
    var cssText = styleDeclar.cssText;
    console.log(cssText);
</script>

上述示例代码的输出结果如下:

值得注意的是: cssText 属性返回的是 CSS 声明块的文本内容，解析操作时会比较麻烦。

遍历 CSSStyleDeclaration 对象

由于 CSSStyleDeclaration 对象具有 length 属性，返回该对象的属性的数量。我们可以通过这一特性实现遍历 CSSStyleDeclaration 对象，从而得到所有属性名和相应的值。

我们可以通过以下示例代码，学习如何遍历 CSSStyleDeclaration 对象:

<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>
<script>
    var pElem = document.getElementById('p1');

    var styleDeclar = pElem.style;
    for ( var i=0; i<styleDeclar.length; i++ ){
        var propertyName = styleDeclar.item(i);
        var propertyValue = styleDeclar.getPropertyValue(propertyName);
        console.log(propertyName + ' : ' + propertyValue);
    }
</script>

上述示例代码的输出结果如下:

在上述示例代码中，我们利用 CSSStyleDeclaration 对象的 length 属性控制遍历过程。

在遍历过程中，我们先利用 CSSStyleDeclaration 对象的 item() 方法得到每一个 CSSStyleDeclaration 对象的属性名，再利用 CSSStyleDeclaration 对象的 getPropertyValue() 方法根据属性名得到相应的值。

item() 方法

通过 element.style.item(index) 获取 CSS 的样式属性名，这种方式也可以通过 element.style[index] 方式进行替换。换句话讲，这两种方式是等价的。

我们可以通过以下示例代码，学习对比这两种方式:

for ( var i=0; i<styleDeclar.length; i++ ){
    var itemName = styleDeclar.item(i);
    var styleName = pElem.style[i];
    console.log('item()方法: ' + itemName, 'style[index]: ' + styleName);
}

上述示例代码的输出结果如下:

getPropertyValue() 方法

通过 element.style.item.getPropertyValue() 获取 CSS 的样式属性值，这种方式也可以通过 element.style[propertyName] 方式进行替换。

我们可以通过以下示例代码，学习对比这两种方式:

for ( var i=0; i<styleDeclar.length; i++ ){
    var propertyName = styleDeclar.item(i);
    var value1 = styleDeclar.getPropertyValue(propertyName);
    var value2 = pElem.style[propertyName];
    console.log('getPropertyValue()方法: ' + value1, 'style[attrName]: ' + value2);
}

上述示例代码的输出结果如下:

属性链方式操作

由于通过 element.style 返回的是 CSSStyleDeclaration 对象，所以我们也可以通过 element.style.attrName 的方式获取具体的样式属性的值。

我们可以通过以下示例代码，学习这种获取方式:

<p id="p1" style="color: lightcoral;font-weight: bolder">这是一个段落内容.</p>
<script>
    var pElem = document.getElementById('p1');
    var style = pElem.style;
    console.log(style.color);
</script>

---

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。