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

Which JavaScript-framework can search CSS stylesheet rules and edit their properties?

本文关键字：编辑 规则 属性 样式 框架 javascript CSS 搜索 哪个      更新时间：2023-09-26

问题

哪一个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. 所选规则的"显示"值是多少?
  3. 删除"display"属性

(2。和3。只要我从框架中得到CSS规则的句柄，就可以很容易地单独使用DOM)

不够好的框架:

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

YUI也没有办法获得单个属性(底层DOM可以，但不能通过YUI获得该结构)。但是，如果您通过YUI方法获得该规则，则可以单独删除"display"属性。

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

Ext JS有Ext.util. css。我检查了代码，在getRule()中发现了一个bug…除此之外，它在选择器匹配方面相当草率(对IE有不良影响)，这使得它不适合多选择器规则。它也不能通过API删除属性，但可以给你CSSRule，这样你就可以自己做了。- CSS树遍历是尽可能原始的:没有降序媒体规则或导入。

PD:

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

没有，但请证明我错了…

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

  • 如何遍历CSS树(包括@imports和@media)
  • 如何配置walk(哪些@media和哪些sheet被考虑)
  • 如何处理/规避跨域访问限制
  • as CSS没有规则本身的id:只有选择器可以作为合适的规则标识符
    • 作为IE8及以下版本拆分的多选择器，框架处理这个问题有多聪明?
    • IE9更糟(见quirksmode.org)
  • 如果一个选择器可以选择多个规则，它们是如何排序的?
  • 如何从知道我们想要编辑的属性的规则集中找到负责的规则?

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

  • 获取style/link节点，您要查找的规则在
    • 中
  • 使用节点。直接进入CSSStyleSheet
  • 查看quirksmode.org中的怪癖和f…即
  • 循环遍历规则，通过已知选择器
    • 查找规则
  • DOM CSSStyleRule给你所有的权力，你需要任何样式规则

如您所见，YUI有样式表实用程序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
    ...
}

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

有像postCSS这样的库，它允许你使用模块化的插件生态系统来编程地改变你的CSS样式。

Robert Siemer的问题解释:

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

我想给出一个更好地定义问题的答案，对于那些正在寻找类似的东西的读者和那些将问题与更新元素的样式混淆在一起的作者。

牛肉

我认为牛肉的第一部分是要注意浏览器确实允许对现有样式表进行操作，正如这条评论所暗示的那样，并在本回答中进行了分析。例如，下面一行在文档的第二个样式表的第三条规则上将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>

…and style.css:

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

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

Microframework 

function forEachCSSRule (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 getCSSRulesBySelector (selectorString) {
  var matched = []
  forEachCSSRule(function (cr) {
    if (cr.selectorText.includes(selectorString)) {
      matched.push(cr)
    }
  })
  return matched
}
function getCSSRulesByStyle (styleString) {
  var matched = []
  forEachCSSRule(function (cr) {
    if (cr.cssText.includes(styleString)) {
      matched.push(cr)
    }
  })
  return matched
}

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

var rules = getCSSRulesByStyle('display: none')
rules.forEach(function (rule) {
  rule.style.display = 'block'
})

…

相关文章：