将数据追加到css类- jQuery字符串操作
请看下面的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类'blog'，我想通过js/jQuery给那个类添加一些其他的值。实际上它是一个HTML编辑器，在body标签上用户选择了' blog‘元素，所以我想让用户为博客设置CSS，用户在文本区域更改CSS，之后我想将数据附加/重写到那个'blog’类中。
例如:用户设置类，如下所示
width:250px;
background:red;
key:value..etc..所以在那之后我想把'blog‘css类改成
.blog
{
width:250px;
background:red;
key:value..etc..
}我如何才能做到这一点？有没有办法使用jQuery ?？
更新:请检查此图像。
谢谢。
回答 4
Stack Overflow用户
发布于 2011-10-22 14:00:10
对于这样的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
Stack Overflow用户
发布于 2011-10-22 13:42:18
如果希望这是实时发生的，只需获取文本区域的值并在javascript中解析它，然后使用jquery应用这些值就可以了，如下所示
$('.blog').css({'property1':'value1','property2':'value2'});现在，如果您想永久保存这些更改，则需要将新的CSS值发送到服务器，并将其存储在数据库或其他地方。
编辑:要将其保存到数据库中...
您可以像这样从文本字段中获取值。.val cssVal =$(‘#textfieldid’) var ()；
然后使用jQuery ajax函数将新值发送到服务器。
http://api.jquery.com/jQuery.ajax/
我不打算深入讨论所有的细节，你可以在网上找到所有的数据库教程，但是你想要获取你使用jQuery发送到你的服务器的文本字段的值，并将它保存在存储css规则属性的数据库表中。
然后，当您重新生成页面时，您将从数据库中检索新的CSS值。
Stack Overflow用户
发布于 2011-10-22 15:00:55
我继续做了下面的测试，因为我已经有一段时间没有做JavaScript了，我想试一试。第一种方法使用String.split来解析文本区输入，第二种方法使用一些基本的正则表达式。如果每行有多条语句，正则表达式将失败。它们都给用户带来了比原生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>https://stackoverflow.com/questions/7857585
复制相似问题
腾讯云开发者
