javascript - 哪个 JavaScript 框架可以搜索 CSS 样式表规则并编辑它们的属性？

Question

问题

哪个 JavaScript 框架(prototype、script.aculo.us、Mootools、MochiKit...)有不错的 CSS 规则编辑支持？

这是关于更改样式规则。我想要有变化的动态 CSS 类。示例:

<style>
#answer, .reveal { display: none; color: blue; }
#answer { /* additional stuff */ }
</style>

现在，我想通过 JavaScript 更改其中包含“display: none”的规则。 – 我相信有时候这是正确的方法；当这不是正确的做法时，我不会寻找替代方案。

哪个框架可以使以下操作变得简单:

1. 从所有规则中选择一个规则(例如“#answer, .reveal”)
2. 所选规则对“显示”有什么值(value)？
3. 从规则中删除“显示”属性

(2. 和 3. 单独使用 DOM 很容易，只要我从框架中获得 CSS 规则的句柄)

不够好的框架:

例如，YUI 的 StyleSheet 一次只能在一个工作表中搜索规则(有限，但对我来说足够了)，但它不能像我的第一个示例那样显示、编辑或检索多选择器规则(对我来说太有限了)味道)。

YUI 也没有办法获取单个属性(底层 DOM 可以，但你不能通过 YUI 获取该结构)。但是，如果您通过 YUI 方式掌握规则，您可以单独删除“显示”属性。

Dojo 在 dojox.html.styles 下有一些文档不完整和不完整的东西

Ext JS 有 Ext.util.CSS。我检查了代码并在 getRule() 中发现了一个错误...否则它在选择器匹配方面非常草率(对 IE 的影响很差)，这对多选择器规则不利。它也不能通过 API 删除属性，但可以给你 CSSRule，这样你就可以自己做。 – CSS 树遍历尽可能原始:不依赖媒体规则或导入。

PD:

$('.reveal').css(...whatever...) 不是答案，因为它根本不触及 CSS 规则(它触及某些元素的 CSS 属性) !

Answer 1

没有，但请证明我错了...

体面的实现必须首先讨论/记录以下内容:

• 它如何遍历 CSS 树(包括@imports 和@media)
• 如何配置步行(考虑哪些@media 和哪些工作表)
• 如何处理/规避跨域访问限制
• 因为 CSS 没有规则本身的 ID:只有选择器可以充当合适的规则标识符
  • 当 IE8 及更低版本拆分多重选择器时，处理此问题的框架有多聪明？
  • IE9 更差(参见 quirksmode.org)
• 由于一个选择器可以选择多个规则，它们是如何排序的？
• 如何从已知我们要编辑的属性的规则集中找到负责的规则？

在框架 catch 来之前，请考虑:

• 获取要查找的规则所在的样式/链接节点
• 使用 node.sheet 直接转到 CSSStyleSheet
• 检查 quirksmode.org 的怪癖和 f... IE
• 遍历规则以通过已知选择器找到您的规则
• DOM CSSStyleRule 赋予您对任何样式规则所需的所有权力