在 JavaScript 中获取 HTML 元素的 CSS 属性值

在 Web 开发中，动态操作 CSS 属性可以增强用户体验和界面。使用 JavaScript，访问这些属性非常简单。

在您的场景中，CSS 文件链接到 HTML 页面，您需要检索类名为“的 div 的特定属性（例如颜色）”布局。”以下是如何使用 JavaScript 实现此目的：

选项 1：解析文档样式表（不推荐）

说明：
此方法涉及手动迭代文档.styleSheets 对象并解析其内容以搜索所需的属性。但是，不建议使用这种方法，因为它可能会变得笨拙，特别是对于复杂的 CSS 文件或当您需要检索多个元素的属性时。

选项 2：模拟元素并使用计算样式（首选）

说明：
此方法效率更高，结果更准确。它涉及创建一个与目标元素具有相同类名的元素，然后访问所创建元素的计算样式。计算的样式表示应用于元素的实际样式，包括继承的样式以及通过用户样式表或 JavaScript 进行的任何修改。

JavaScript 代码：

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

非内联样式注意事项

如果要在没有内联样式定义的情况下检索继承的样式属性，可以暂时删除内联样式，然后检索继承的值。

JavaScript代码：

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}