Question

请看下面的html。编辑：更新HTML部分

<div id="html_editor">

      <head>
       <style type="text/css" >
          .blog
          {
           border:2px solid grey;
           width:auto;

          }
          <style>{customcss}</style>
        </style>
        </head>
        </html>
</div>

请看一下Css Class'blog'，我想通过js / jQuery为该类添加一些其他值。实际上它是一个HTML编辑器，在body标签用户选择'blog'元素，所以我想让用户为博客设置CSS，用户在文本区域更改CSS，之后我想要将数据附加/重写到该'博客'类。

Ex：用户设置类如下

width:250px;
background:red;
key:value..etc..

所以在那之后我想将'blog'css类改为

.blog
          {
          width:250px;
    background:red;
    key:value..etc..

          }

我怎样才能做到这一点？有没有办法使用jQuery ??

更新：请检查此图片。

谢谢。

Answer 1

对于这样的HTML：

<style id="mycss" type="text/css" >
      .blog
      {
       border:2px solid grey;
       color:black;
       }
 </style>

<div class="blog">This is a blog</div>

试试这个js：

var style = document.getElementById("mycss");
newrule = document.createTextNode('.blog { color:red;}');
style.appendChild(newrule);

这不是很有效，因为它会覆盖先前的规则，但您可以获得一般方法。

JSFiddle here

Answer 2

如果你想让它实时发生，就像获取textarea的值并在javascript中解析它一样简单，然后像jquery一样应用这些值

$('.blog').css({'property1':'value1','property2':'value2'});

现在，如果要永久保存这些更改，则需要将新的css值发送到服务器并将其存储在数据库或其他内容中。

编辑：将其保存在数据库中......

您可以像这样从文本字段中获取值。 var cssVal = $（'＃textfieldid'）。val（）;

然后使用jQuery ajax函数将新值发送到您的服务器。

http://api.jquery.com/jQuery.ajax/

我不打算详细介绍这一点，你可以在网上到处找到数据库教程，但是你想要使用jQuery获取你发送到服务器的文本字段的值，并保存在存储css规则属性的数据库表。

然后，当您重新生成页面时，您只需从数据库中检索新的css值。

Answer 3

我继续进行以下测试，因为我有一段时间没有完成JavaScript，我想试一试。第一种方法使用String.split来解析textarea输入，第二种方法使用第二种基本正则表达式。如果每行有多个语句，则正则表达式将失败。它们都给用户带来了比本机CSS更大的语法负担，因此：

我认为你应该做nikan所建议的。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", '1.6.4');
            console.debug('loading');
            google.setOnLoadCallback(function() {
                var input = $('#userinput').val();

                var statements = input.split(';');
                for (var statement in statements){
                    var style = statements[statement].split(':');
                    var name = $.trim(style[0]);
                    var value = $.trim(style[1]);

                    $('#target').css(name, value);
                }

                var very_basic_css_matching = /^ *([^:]+): *([^;]+);/gm;
                while (matches = very_basic_css_matching.exec(input)){
                    $('#target').css(matches[1], matches[2]);
                }
            });
        </script>
    </head>
    <body>
        <textarea id="userinput">
width:250px;
height:10px;
background:red;
        </textarea>

        <div id="target">
        </div>
    </body>
</html>

Answer 4

使用jquery可以轻松访问当前样式并对其进行修改：

http://jsfiddle.net/jedSP/7/

尝试在文本区域中编写“color：white”或“background：green”，适用于所有浏览器。当用户完成后，只需使用$（“＃style”）。html（）来获取当前的CSS。

已编辑：更新了链接......就像这样？

将数据附加到css类 - jQuery字符串操作

4 个答案: