个人中心
gpt4 book ai didi

javascript - 将父类添加到样式标签内的 css

转载 作者：行者123 更新时间：2023-11-30 10:16:15 25 4
gpt4 key购买 nike

我创建的 Web 应用程序有问题。在页面的左侧，我有一个可编辑区域，右侧是实时预览。实时预览区域实际上是一个 HTML 文件，其中包含可以使用编辑区域进行操作的特制字段。问题是因为用户 HTML 可以是他们想要的任何东西。一些 CSS 可能会渗透到我页面的其余部分。用户这样做并不少见:background:red;在他们的设计中，导致我的整个页面都是红色的。

所以，解决这个问题的方法(至少是我想出的方法)是将用户样式包装到父类中。然后在预览区域有那个父类。这样用户风格就不会渗透到我的设计中。我正在考虑用 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 id="Preview">
  <style>
     #Preview div { background: red; }
  </style>
  <div>I'm red</div>
</div>

编辑:我知道样式真的应该在头脑中。然而，被操作的 html 文档实际上将作为电子邮件发送。电子邮件客户端对 CSS 样式的支持充其量是劣质的，在某些情况下最好放在正文中。这令人沮丧，但我必须与我的目标一起工作。

最佳答案

试试这个。

我循环遍历 dom 中的所有样式元素，存储规则并在存储时从 dom 中删除它们。

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

最后，获取less脚本并解析样式规则，将它们添加到正文中，然后将主类设置到正文中。

<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>

关于javascript - 将父类添加到样式标签内的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23562041/

25 4 0
文章推荐： javascript - 向 jQuery Modal 发送 ajax 成功响应
文章推荐： swift - Cocos2d-Swift : CCProgressNodeTypeBar not found in Swift
文章推荐： javascript - 为什么我的 jsfiddle Javascript 类没有定义？
文章推荐： uitableview - 在 Swift 中显示导航栏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com