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

发布于 2024-12-07 20:20:30 字数 359 浏览 0 评论 0原文

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

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

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

原文

So I am looking for a jQuery Plugin or a method using javascript in general where I can obtain CSS properties from a string without using a lot of If else statements I have to write. The string comes from a user input like a Text area. Example:

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

So basically I want to be able to identify ID's and Classes from a string and their properties. So in this case that there is an ID called Hello and that it has a 1px border and a background color of #FFF (white). The info will be then be added to an object asnd pushed into an array. Is there a plugin or a way I can do this? There will also be multiple in each string. I know this might seem a little confusing. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱花坊 2024-12-14 20:20:30

看来你想解析CSS样式规则并提取组件。这并不太难，因为一般语法是一个选择器，后跟零个或多个以分号分隔的冒号分隔的名称：值对组的列表（即 选择器 { 属性 : 值; 属性 : 值 ...});

正则表达式应该可以解决问题，但是如果您希望选择器完全符合当前标准，则可能会变得复杂 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 文本应用到适当的样式属性，在过程中将连字符名称更改为驼峰命名法。

编辑

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

It seems that you want to parse CSS style rules and extract the components. That isn't too hard since the general syntax is a selector followed by a list of zero or more semi-colon separated sets of colon separated name:value pairs (i.e. selector { property : value; property : value; …}).

A regular expression should do the trick, however it might get complex if you want the selector to be fully compliant with the current standard, CSS 2.1.

If all you want is single id and class selectors, then life is much simpler. A start on such a function is:

  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);
  }

that will split the selector from the rules, then separate the rules into an array. You will need to deal with a bit of whitespace here and there, but otherwise if all you want to do is apply the (possibly empty set of) style rules to an element selected by the selector, that's about it.

You just need to split each rule on the colon ":" and apply the CSS text to the appropriate style property, changing hyphenated names to camelCase in the processs.

Edit

Oh, and if you want a really simple solution, just add the rule to the bottom of the last style sheet in the document. That way you don't have to parse it at all, just drop it in and let the browser do the work.

回复收藏 0 原文

遮云壑 2024-12-14 20:20:30

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

然后你这样做：（伪代码）

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

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

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

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

This can be quite trivial if you run javascript on the rendered page. First, get a list of all CSS properties (the list can be quite large).

Then you do: (pseudocode)

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

Then the string you want would become: