JavaScript 如何访问 HTML 元素的 CSS 属性？

使用 JavaScript 提取 CSS 属性

通过 JavaScript 访问 HTML 元素的 CSS 属性是动态 Web 开发的一项基本技能。考虑外部样式表（例如“style.css”）链接到网页的情况。要操作特定的 CSS 属性，需要使用 JavaScript 检索它们的值。

读取 CSS 属性的选项

有两种主要方法可以实现此目的：

1. 直接样式对象访问：在现代浏览器中，访问 document.styleSheets 对象提供了应用于文档的所有样式规则的完整列表。通过解析该对象，可以定位并提取各个属性。但是，由于其复杂性和局限性，不建议使用此方法。
2. GetCompulatedStyle 方法： 更通用的方法是使用 createElement() 方法创建具有所需样式配置的元素。通过对该元素应用 getCompulatedStyle() 或 currentStyle (IE) 方法，可以获得具体的 CSS 属性值。

示例：提取 Color 属性

考虑以下代码片段：

<code class="javascript">function getStyleProp(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    } else if (elem.currentStyle) {
        return elem.currentStyle[prop]; // IE
    }
}

window.onload = function () {
    var d = document.createElement("div"); // Create div
    d.className = "layout";                // Set class = "layout"
    alert(getStyleProp(d, "color"));       // Get property value
};</code>

此函数采用两个参数：目标元素和所需的 CSS 属性（例如“颜色”）。通过创建与目标元素具有相同样式的临时 div 元素，代码提取并返回指定的属性值。

高级技术

检索样式属性排除内联样式，可以使用 getNonInlineStyle() 函数：

<code class="javascript">function getNonInlineStyle(elem, prop) {
    var style = elem.cssText; // Cache the inline style
    elem.cssText = "";        // Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); // Get inherited value
    elem.cssText = style;     // Add the inline style back
    return inheritedPropValue;
}</code>

通过暂时删除内联样式，该函数显示从样式表继承的属性值。

以上是JavaScript 如何访问 HTML 元素的 CSS 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！