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

Posted

技术标签:

【中文标题】哪个 JavaScript 框架可以搜索 CSS 样式表规则并编辑它们的属性？【英文标题】：Which JavaScript-framework can search CSS stylesheet rules and edit their properties? 【发布时间】：2011-10-04 17:05:12 【问题描述】：

问题

javascript 框架（prototype、script.aculo.us、Mootools、MochiKit...）支持良好的 CSS 规则编辑？

这是关于更改样式规则。我想要 动态 CSS 类 来改变。示例：

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

现在，我想通过 JavaScript 更改其中包含“显示：无”的规则。 – 我相信有时这是正确的方法；当这不是正确的方法时，我不是在寻找替代方案。

哪个框架使以下工作变得容易：

    从所有规则中选择一个规则（例如“#answer, .reveal”） 所选规则对“显示”有什么价值？ 从规则中删除“显示”属性

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

不够好的框架：

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

YUI 也无法获取单个属性（底层 DOM 可以，但您无法通过 YUI 获取该结构）。您可以单独删除“显示”属性，不过，如果您通过 YUI 方式掌握了规则。

Dojo 在 dojox.html.styles 下有一些记录不充分且不完整的内容

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

PD：

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

【问题讨论】：

可能还想在列表中添加 Dojo Toolkit javascript 库。我不确定它目前是否符合您的要求，尽管它具有一些非常不错的 CSS 访问器/修改功能。曾几何时，我会推荐“behaviour-js”，但创建者 Ben Nolan 表示，它已经在您列举的框架中被广泛采用。 见：***.com/questions/622122/… @Richard，我之前读过这个问题，它甚至没有回答自己（如何在 jQuery 中编辑 CSS 规则），也没有回答我的问题（哪个框架有不错的 CSS 规则编辑支持） . – 我已经知道 JavaScript 本身有很长的方法可以做到这一点。 这是一个很好的问题，也是我正在努力解决的问题。应该有一个简单的方法来做到这一点。我可以为它想出大量的用例。 【参考方案1】：

Robert Siemer 的问题解释：

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

我想给出一个答案，以更好地为正在寻找类似事物的读者以及将问题与更新元素样式混为一谈的作者定义问题。

牛肉

我认为牛肉的第一部分是要注意浏览器确实允许操纵现有的stylesheets，正如this comment 所暗示的那样，this answer 中对此进行了分析。例如，以下行将文档第二个样式表中第三条规则的 padding-top 值从 20px 修改为 300px：

document.styleSheets[1].cssRules[2].style.paddingTop = '300px'

...给定index.html:

<html>
<head>
  <link type="text/css" href="foo.css"
  <link type="text/css" href="style.css">
<head>
<body><h1>Bar</h1></body>
</html>

...和style.css:

html, body  padding: 0; margin: 0 
body  color: black; 
h1  color: gray; padding-top: 20px;

牛肉的第二部分是如何找到符合标准的规则。正如the answer 所讨论的，这两个部分在与旧浏览器的兼容性方面都存在挑战。 如果我们忘记了兼容性问题并专注于这样一个框架应该如何大致工作，这是我在 vanilla JavaScript 中的最小实现。

微框架

function forEachCs-s-rule (iteratee) 
  var i, j, crs
  for (i = 0; i < document.styleSheets.length; i += 1) 
    crs = document.styleSheets[i].cssRules
    for (j = 0; j < crs.lenght; j += 1) 
      iteratee(crs[j])
    
  


function getCs-s-rulesBySelector (selectorString) 
  var matched = []
  forEachCs-s-rule(function (cr) 
    if (cr.selectorText.includes(selectorString)) 
      matched.push(cr)
    
  )
  return matched


function getCs-s-rulesByStyle (styleString) 
  var matched = []
  forEachCs-s-rule(function (cr) 
    if (cr.cssText.includes(styleString)) 
      matched.push(cr)
    
  )
  return matched

使用这样的框架，您可以例如：

var rules = getCs-s-rulesByStyle('display: none')
rules.forEach(function (rule) 
  rule.style.display = 'block'
)

...这是原始问题要求的内容。

【讨论】：

【参考方案2】：

存在像 postCSS 这样的库，它允许您使用插件的模块化生态系统以编程方式更改您的 CSS 样式。

【讨论】：

【参考方案3】：

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

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

它如何遍历 CSS 树（包括 @imports 和 @media） 如何配置步行（考虑哪些@media 和哪些工作表） 如何处理/规避跨域访问限制 因为 CSS 本身没有规则的 ID：只有选择器才能充当体面的规则标识符 由于 IE8 及更低版本拆分了多选器，处理此问题的框架有多智能？ IE9 更糟糕（见quirksmode.org） 由于一个选择器可以选择多个规则，它们是如何排序的？ 如何从知道我们要编辑的属性的规则集中找到负责的规则？

在框架赶上之前，请考虑：

获取您要查找的规则所在的样式/链接节点 使用node.sheet直接进入CSSStyleSheet 检查 quirksmode.org 以了解 quirks 和 f... IE 循环遍历规则以通过已知选择器找到您的规则 DOM CSSStyleRule 为您提供超越任何样式规则所需的所有功能

【讨论】：

是的，有人请写这个库:) 你说的这个“非标准node.sheet”是什么？找不到。 我编辑了我的答案：node.sheet 是 DOM 标准。包含样式规则（例如 ）的 DOM 节点（“node”）具有引用 CSSStyleSheet 对象的 sheet 属性（“node.sheet”）。【参考方案4】：

如您所述，YUI 有 StyleSheet 实用程序 http://developer.yahoo.com/yui/3/stylesheet/

例子：

var sheet = new Y.StyleSheet(styleNode);
sheet.set('.hover, .foo:hover', 
    background: 'red',
    color: '#fff'
);

它还支持通过向构造函数传递一串 css 规则来从头创建样式表。

请注意，同源策略会阻止访问远程链接节点的规则。

它还不支持以对象树的形式访问规则或访问规则的特定属性。不过，它确实支持删除规则或规则属性。今天，你可以做的最好的事情是将规则作为对象处理，就像

var style = sheet.getCssText('.foo'),
    tmp = document.createElement('div');

tmp.style.cssText = sheet.getCssText('.foo');
if (tmp.style.display)  // does the rule include a setting for display
    ...

由于在运行时弄乱样式表很少是正确的解决方案，因此该实用程序并没有太多开发人员关注添加功能。当然，欢迎提出功能请求。

【讨论】：

我们有 2011 年，飞行汽车和宇宙飞船。并且没有办法动态更改样式表？ – 不，至少不是您选择的框架。 – 您将如何手动将 HTML 的样式从蓝色更改为绿色？通过向所有受影响的元素添加“风格”？不，当然不。您将在样式表中进行单点编辑。但是，如果您从脚本中执行此操作，则称其为“混乱”。为什么？ – 在我看来，这是唯一正确的做法：在需要更改的地方更改它，而不是在十个不同的地方覆盖它并希望它不会损坏...... 元素样式更改会触发重绘或重排，浏览器会非常努力地限制其范围。它还批量重排，因此如果操作正确，更改十个元素样式只会触发一个重排或重绘，并且重绘/重排影响的页面数量将最小化。对样式表的任何更改都会触发整个页面重排，这是响应式 UI 所能做的最糟糕的事情。应构建应用程序以支持使用类和级联规则将蓝色变为绿色。 此外，跨浏览器样式表 API 支持至少可以说是一段坎坷的历史，而元素样式和类修改则相当坚如磐石。我很同情你想要一个更方便的 API 来操作样式表，但这并不能使它成为适合这项工作的工具。然后，YUI 的 StyleSheet 工具可以编辑多选规则。 样式表更改肯定是一次重排。是否便宜在很大程度上取决于页面和浏览器。 – YUI 的 StyleSheet 实用程序仅根据 IE 规则、Chrome 等进行多选择器。它既不能选择也不能改变我的第一个示例。 – 跨浏览器问题正是我寻找能够为我做这件事的框架的原因！

以上是关于哪个 JavaScript 框架可以搜索 CSS 样式表规则并编辑它们的属性？的主要内容，如果未能解决你的问题，请参考以下文章

哪个前端框架适合单页搜索应用？ [关闭]

CSS vs. JS Animation: 哪个更快

总结2017年JavaScript框架类库工具

比较好的web框架

CSS VS JS动画，哪个更快[译]

前端常用的框架都有哪些？