Fatal编程技术网
  • javascript/
  • Javascript 将父类添加到css内部样式标记

Javascript 将父类添加到css内部样式标记

javascript jquery html css less

Javascript 将父类添加到css内部样式标记,javascript,jquery,html,css,less,Javascript,Jquery,Html,Css,Less,我正在创建的web应用程序有问题。在页面的左侧有一个可编辑区域，右侧有一个实时预览。实时预览区域实际上是一个HTML文件，其中包含精心编制的字段，可以使用编辑区域进行操作。问题在于，用户可以随意使用HTML。一些CSS会渗透到我页面的其余部分。用户这样做并不少见：背景：红色；在他们的设计，并导致我的整个页面是红色的 因此，解决这个问题的方法（至少是我提出的方法）是将用户样式包装到父类中。然后在预览区域中显示该父类。这样，用户的风格就不会渗透到我的设计中。我在考虑用LESS和jQuery这样的东西

我正在创建的web应用程序有问题。在页面的左侧有一个可编辑区域，右侧有一个实时预览。实时预览区域实际上是一个HTML文件，其中包含精心编制的字段，可以使用编辑区域进行操作。问题在于，用户可以随意使用HTML。一些CSS会渗透到我页面的其余部分。用户这样做并不少见：背景：红色；在他们的设计，并导致我的整个页面是红色的

因此，解决这个问题的方法（至少是我提出的方法）是将用户样式包装到父类中。然后在预览区域中显示该父类。这样，用户的风格就不会渗透到我的设计中。我在考虑用LESS和jQuery这样的东西：

//psuedo code
less.Compile(".ParentClass { " + $("style").html() + "}");
然而，我找不到像这样可以使用的更少的库。有人知道我可以将CSS父类附加到标记中的所有元素的方法吗

示例：

<div id="Preview">
  <style>
     div { background: red; }
  </style>
  <div>I'm red</div>
</div>


div{背景：红色；}
我是红色的
将成为：

<div id="Preview">
  <style>
     #Preview div { background: red; }
  </style>
  <div>I'm red</div>
</div>


#预览div{背景：红色；}
我是红色的
编辑：我知道风格真的应该在头脑中。然而，被操纵的html文档实际上将作为电子邮件发送。电子邮件客户端对CSS样式的支持充其量是劣质的，在某些情况下，最好是在体内。这很令人沮丧，但我必须与我的目标一起工作。

添加一个
范围
属性


浏览器支持当前处于禁用状态。
将
范围
属性添加到

浏览器支持当前处于禁用状态。
请尝试此操作

我遍历dom中的所有样式元素，存储规则并在存储时将其从dom中删除

然后构建less样式表，包括发现的样式规则

最后，检索less脚本并解析样式规则，将它们添加到主体中，然后将master类设置为主体


<html>
    <head>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            //Loop through all style elements in dom, storing the rules and removing them from the dom when stored
            var styles = "";

            $.each($("style"), function(index, value){
                styles += $(value).text();
                $(value).remove();
            });

            //Build the less stylesheet, including the discovered style rules
            var lessStyles = ".master { " + styles + " }";

            //Retrieve less and parse the style rules, adding them to the body, then set the master class to the body
            $.getScript("http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js",function(){
                var parser = new(less.Parser);
                parser.parse(lessStyles, function (err, tree) {
                    if (err) { return console.error(err) }

                    var css = tree.toCSS();

                    $("<style/>").html(css).appendTo("body");
                    $("body").addClass("master");
                });
            });
        });
    </script>
    <style type="text/css">
        h2{
            color:green;
        }
    </style>
    </head>
    <body>
        <style type="text/css">
            .class2{
                color:red;
            }
        </style>

        <h1 class="class2">H1</h1>
        <h2>H2</h1>
    </body>
</html>




$（函数（）{
//循环遍历dom中的所有样式元素，存储规则并在存储时将其从dom中删除
var=”；
$。每个（$（“样式”）函数（索引、值）{
样式+=$（值）.text（）；
$（值）.remove（）；
});
//构建less样式表，包括发现的样式规则
var lessStyles=“.master{”+样式+“}”；
//检索less并解析样式规则，将它们添加到主体中，然后将master类设置为主体
$.getScript（“http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js“，函数（）{
var parser=new（less.parser）；
parse（lessstyle，function（err，tree）{
if（err）{return console.error（err）}
var css=tree.toCSS（）；
$（“”）.html（css）.appendTo（“body”）；
$（“主体”）.addClass（“主控”）；
});
});
});
氢{
颜色：绿色；
}
.2级{
颜色：红色；
}
H1
氢

试试这个

我遍历dom中的所有样式元素，存储规则并在存储时将其从dom中删除

然后构建less样式表，包括发现的样式规则

最后，检索less脚本并解析样式规则，将它们添加到主体中，然后将master类设置为主体


<html>
    <head>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            //Loop through all style elements in dom, storing the rules and removing them from the dom when stored
            var styles = "";

            $.each($("style"), function(index, value){
                styles += $(value).text();
                $(value).remove();
            });

            //Build the less stylesheet, including the discovered style rules
            var lessStyles = ".master { " + styles + " }";

            //Retrieve less and parse the style rules, adding them to the body, then set the master class to the body
            $.getScript("http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js",function(){
                var parser = new(less.Parser);
                parser.parse(lessStyles, function (err, tree) {
                    if (err) { return console.error(err) }

                    var css = tree.toCSS();

                    $("<style/>").html(css).appendTo("body");
                    $("body").addClass("master");
                });
            });
        });
    </script>
    <style type="text/css">
        h2{
            color:green;
        }
    </style>
    </head>
    <body>
        <style type="text/css">
            .class2{
                color:red;
            }
        </style>

        <h1 class="class2">H1</h1>
        <h2>H2</h1>
    </body>
</html>




$（函数（）{
//循环遍历dom中的所有样式元素，存储规则并在存储时将其从dom中删除
var=”；
$。每个（$（“样式”）函数（索引、值）{
样式+=$（值）.text（）；
$（值）.remove（）；
});
//构建less样式表，包括发现的样式规则
var lessStyles=“.master{”+样式+“}”；
//检索less并解析样式规则，将它们添加到主体中，然后将master类设置为主体
$.getScript（“http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js“，函数（）{
var parser=new（less.parser）；
parse（lessstyle，function（err，tree）{
if（err）{return console.error（err）}
var css=tree.toCSS（）；
$（“”）.html（css）.appendTo（“body”）；
$（“主体”）.addClass（“主控”）；
});
});
});
氢{
颜色：绿色；
}
.2级{
颜色：红色；
}
H1
氢

不幸的是，我不能太多地控制用户的HTML（部分原因是我使用的是一个遗留产品）。我真的希望能够在css样式上动态添加父类。谢谢你的回答（我想我可以用jquery添加作用域变量）样式标记应该只出现在头部。假设它在另一个领域工作，但它不是w3c的html检查过程validation@sudharsan-在HTML 5.1中添加一个作用域属性可以使其位于正文中。@sudharsan同意，但是，这实际上将用于电子邮件客户端（合法而不是垃圾邮件。别担心）。不幸的是，电子邮件客户端对样式标记的支持在身体上比在头部更好。不幸的是，我不能太多地控制用户的HTML（部分原因是我使用的是传统产品）。我真的希望能够在css样式上动态添加父类。谢谢你的回答（我想我可以用jquery添加作用域变量）样式标记应该只出现在头部。假设它在另一个领域工作，但它不是w3c的html检查过程validation@sudharsan-添加作用域属性