代码之家 › 专栏 › 技术社区 › KOUSIK MANDAL

如何在div中封装动态设置html的css,使其不影响外部元素?

css html jquery javascript

KOUSIK MANDAL · 技术社区 · 7 年前

我的情况是,用户可以在文本框中粘贴任何HTML。然后我必须操作HTML,例如,找出所有锚标记或div等等。

为了解决这个问题,我制作了一个隐藏的div,并将该div的html设置为与粘贴的html相同。

var pastedHtml = $("#textbox-id").val();
$("#hiddendiv").html(pastedHtml);

一旦做到这一点,我就可以完全访问粘贴的HTML文档作为DOM元素,并可以使用jQuery或JavaScript轻松地操作它。

现在我面临的问题是,当我将html设置到隐藏的div中时,如果有某种类或id或任何其他选择器与母页相同,那么我的母页就会受到影响。

所以我试图用某种方式将css样式封装在粘贴的html中,这样就不会影响外部页面。

粘贴的html可以包含内联样式(我认为这不是问题)、标签内的样式,甚至外部文件的链接。事实上它可以是任何东西。

所以有图书馆或者其他什么可以做的吗?或者我应该用什么方法来解决这个问题。

任何帮助对我都很好。

如果需要更多的数据,请告诉我。

提前谢谢。

2 回复 | 直到 7 年前

jancha 7 年前

使用iFrAME。在这种情况下,内容将与主文档完全隔离。

同样使用html(parsedhtml)在我看来也很不安全。

贾尼斯

Asons Oliver Joseph Ash 7 年前

如果您可以控制css的分配,只需使用隐藏的 div 的 id 当给内部元素分配css时。

这样一来,它们通常会有更高的特异性,并推翻类似的规则。

示例堆栈段

#hiddendiv #div1 {
  color: red;
}

#hiddendiv .blue {
  color: blue;
}

<div id="hiddendiv">

  <!-- users elements -->

  <div id="div1">Hey, I'm red <span class="blue"> and I am blue </span></div>

</div>

如果不是,这篇文章可能是一个替代方案,其中一个可以隔离内部元素

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前