如何使用 JavaScript 高效地从类中检索 CSS 样式属性？-css教程-PHP中文网

如何使用 JavaScript 高效地从类中检索 CSS 样式属性？

Linda Hamilton

发布： 2024-12-11 09:05:19

原创

718 人浏览过

How Can I Efficiently Retrieve CSS Style Attributes from Classes Using JavaScript?

使用 JavaScript/jQuery 从 CSS 类检索样式属性

在 JavaScript 中使用样式动画时，可能需要访问定义的属性在 CSS 类中。当需要根据 CSS 更改动态更新动画并确保其保持一致时，就会出现挑战。

一种方法涉及使用分配给目标 CSS 类的隐藏元素，提取其计算出的颜色，然后在动画。然而，这种方法通常被认为效率低下。

更强大的解决方案是遍历与文档关联的样式表并搜索相关的特定选择器和样式属性。以下是执行此任务的函数的实现：

function getStyleRuleValue(style, selector, sheet) {
  var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if (!sheet.cssRules) {
      continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
        return rule.style[style];
      }
    }
  }
  return null;
}

登录后复制

示例用法：

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); // searches a specific stylesheet

登录后复制

此函数依赖于拆分以逗号分隔的选择器列表并检查是否给定的选择器是列表的一部分。它支持分组规则和来自同一域的外部样式表。

通过利用此功能，您可以根据 CSS 类属性的变化动态调整样式动画，确保您的网站或应用程序保持美观一致并响应用户需求偏好。

以上是如何使用 JavaScript 高效地从类中检索 CSS 样式属性？的详细内容。更多信息请关注PHP中文网其他相关文章！