javascript - 是否可以通过 javascript 使用自定义 CSS 属性？

Question

我想知道是否可以访问放置在样式表中的自定义规则。例如，采取:

p {
  line-height: 2em;
  -js-min-line-height: 1.4em;
}

我已经尝试遍历样式表对象并获取 CSS 文本，但是浏览器(它可能应该这样做)不会返回它无法识别的属性文本:

for styleSheet in document.styleSheets
  for rule in styleSheet.cssRules
    console.log rule.cssText

简单返回:

p { line-height: 1.4; }

Answer 1

这取决于 CSS 的派生方式。它取决于它是否链接、组合或硬编码。如果它是硬编码的，那么只需在样式元素上放置一个 id，并使用 document.getElementById("styleId").innerHTML 获取文本，然后通过在分号处拆分字符串来解析它.如果它是由 javascript 组成的，那么只需在其中添加一些额外的内容以保持样式应该很容易。如果它是链接的，我认为这是最有可能也是最难处理的情况，那么我建议使用 $.AJAX() 将 css 加载到 javascript 中，阅读文本并将其解析为什么您想要的，然后使用 document.getElementsByName("head")[0].appendChild(varHoldingCss) 将样式添加到您的页面。