Question

所以我正在寻找一个jQuery插件或一般使用javascript的方法，我可以从字符串中获取CSS属性，而不必使用很多我必须编写的If else语句。该字符串来自用户输入，如文本区域。例如：

var string = "#hello{border:1px #000 solid;background-color:#FFF;}";

所以基本上我希望能够从字符串及其属性中识别ID和类。所以在这种情况下，有一个名为Hello的ID，它有一个1px的边框，背景颜色为#FFF（白色）。然后将信息添加到推送到数组中的对象。是否有插件或我可以这样做的方式？每个字符串中也会有多个。我知道这看起来有点令人困惑。谢谢！

Answer 1

您似乎想要解析CSS样式规则并提取组件。这不是太难，因为一般语法是一个选择器后面跟着一个零或多个分号分隔的冒号分隔名称：值对的列表（即 selector { property ： value ; property ： value ; ...}）。

正则表达式应该可以解决问题，但是如果您希望选择器完全符合当前标准CSS 2.1，它可能会变得复杂。

如果您想要的只是单个ID和类选择器，那么生活就会简单得多。这样一个功能的开始是：

  function parseCSSRule(s) {
    var a = s.indexOf('{');
    var b = s.indexOf('}');
    var selector = s.substring(0, a);
    var rules = s.substring(++a, b).split(';');

    // Do something with the selector and the rules
    alert(selector + '\n' + rules);
  }

将选择器从规则中分离出来，然后将规则分成数组。你需要在这里和那里处理一些空格，但如果你想要做的就是将（可能是空的）样式规则应用于选择器选择的元素，那就是它。

您只需要在冒号“：”上拆分每个规则，并将CSS文本应用于相应的样式属性，在过程中将带连字符的名称更改为camelCase。

修改

哦，如果你想要一个非常简单的解决方案，只需将规则添加到文档中最后一个样式表的底部。这样你根本不需要解析它，只需将其放入并让浏览器完成工作。

Answer 2

如果您在呈现的页面上运行javascript，这可能非常简单。首先，获取所有CSS属性的列表（列表可能非常大）。

然后你做:(伪代码）

var properties = []
foreach(property in css_properies)
{
  var value = $('#hello').css(property)
  if( value != "" )
     properites.push(property + ':' + value) 
}

然后你想要的字符串会变成：

'#hello{' + properties.join(';') + '}'

现在，列表包含所有计算的样式，因此它可能非常大。有关详细信息，请参阅css方法。

Answer 3

JSCSSP是一个CSS解析器，我相信它应该能够完全满足您的需求。请查看以下链接：

http://glazman.org/JSCSSP/

请告诉我它是否适合您。感谢。

从String jQuery中获取CSS属性/规则

3 个答案:

修改