javascript - 前端文章页的内容获取自后台编辑器，如何让他不受全局样式影响？
<div class="index-content" v-html="data"></div>data数据来自于后端编辑器的文章页，发现文章内容样式受全局样式的影响，如何让index-content的内容不受全局样式的影响？
共有2个答案
https://www.zhangxinxu.com/wordpress/2021/02/css-revert/
<div class="index-content">
<div v-html="data"></div>
</div>
<style>
.index-content * {
all: revert;
}
</style>
要让 index-content 的内容不受全局样式的影响，你可以采取以下几种策略：
使用 Shadow DOM：
如果你使用的是支持 Web Components 的现代浏览器，你可以使用 Shadow DOM 来封装你的内容。Shadow DOM 提供了一种封装样式和标记的机制，使其与页面上的其他内容完全隔离。<div class="index-content"> <div id="shadowHost"></div> </div> <script> if (window.ShadowRoot && window.customElements) { const shadowHost = document.getElementById('shadowHost'); const shadowRoot = shadowHost.attachShadow({ mode: 'open' }); const template = document.createElement('template'); template.innerHTML = `<div>${yourDataFromBackend}</div>`; // 假设这是从后端获取的HTML字符串 shadowRoot.appendChild(template.content.cloneNode(true)); } </script>
请注意，Shadow DOM 的 mode: 'open' 允许外部通过 shadowHost.shadowRoot 访问 Shadow DOM，但样式仍然被隔离。
使用 Iframe：
虽然 Iframe 是一种较老的技术，但它仍然是一个有效的解决方案，用于隔离内容和样式。然而，使用 Iframe 可能会带来一些限制，比如跨域问题和通信的复杂性。<iframe id="contentIframe" srcdoc="<div>${yourDataFromBackend}</div>"></iframe>
注意，srcdoc 属性接受一个完整的 HTML 文档，所以你需要确保你提供的内容是一个有效的 HTML 片段（如果需要的话，包裹在一个 <!DOCTYPE html>, <html>, <head>, 和 <body> 标签中）。
使用 CSS 命名空间或 BEM (Block Element Modifier) 方法：
如果你不想使用 Shadow DOM 或 Iframe，你可以尝试通过 CSS 来隔离样式。例如，使用唯一的命名空间类来包装你的内容，并确保这个命名空间在全局 CSS 中没有定义。<div class="index-content unique-namespace"> <div v-html="data"></div> </div>
在 CSS 中，确保所有的样式都是针对 unique-namespace 的后代来定义的：
.unique-namespace .some-class {
/* 你的样式 */
}但是，这种方法并不能完全防止全局样式的影响，因为如果有更具体的选择器（比如 ID 选择器或带有更多类的选择器），它们仍然可能覆盖你的样式。
- 清理或重置内部样式：
在将内容插入到index-content之前，你可以尝试清理或重置 HTML 字符串中的内联样式。这可以通过正则表达式或其他字符串处理方法来实现，但请注意，这可能会很复杂，特别是如果 HTML 字符串包含复杂的样式或脚本。 - 使用 CSS 隔离库：
有些库（如 CSS Modules、styled-components、emotion 等）可以帮助你在组件级别上隔离 CSS。但是，这些库主要用于 JavaScript 框架（如 React、Vue 等）中的组件样式，而不是直接用于插入的 HTML 字符串。
在选择解决方案时，请考虑你的具体需求、浏览器的兼容性要求以及项目的复杂性。
-
问题内容： 我想将内容放入javascript全局定义的变量中，我使用ajax call获得的内容。 http://pastebin.com/TqiJx3PA 感谢您的任何建议 问题答案： pastebin代码已经做到了。我猜您实际上面临的问题是存在的，因为您的ajax调用是 异步的 ，这意味着您正在（异步）发出ajax请求，并立即尝试访问全局变量中的值-但它尚未尚未设定。 解决方案是在回调中执行
-
我正试图在一个需要过滤非数字字符和点的编辑文本上实现一个过滤器。我可以使用编辑文本或输入类型的数字标签，但似乎设备之间有轻微的差异，就像有些设备即使在编辑文本中过滤它们也显示点字符。 下面是afterTextChanged方法 这是输出结果 如您所见，在我删除第一个“h”后，当我输入另一个h时，字符串变为“66hh”，其中它应该是“66h”，因为我已经删除了第一个h。什么原因会阻止我对可编辑的更改
-
如题，第三方开发的系统，烂尾，然后前端显示富文本内容一直有个bug(不是第三方富文本编辑器的问题，是第三方开发后前台展示问题) 就是，后台显示正常的文章在前台显示不正常(例如，段落有缩进，到前端就不显示缩进，所以只能通过去除缩进，然后段落前手动敲空格进去)。 目前曲折的办法就想着写个扩展，手动去掉缩进，在文字前加空格，但是试了半天发现用document.querySelectorAll()[].i
-
问题内容： 我想从页面顶部链接的CSS文件中获取样式表规则（或CSS TextContent）。似乎可以在所有主要浏览器上使用，但是在IE <9中当然不能使用。此解决方案的正确方法是什么？使用AJAX加载文件？但是，我只限于来自同一域的样式。 问题答案： 对于IE，您可以使用对象的属性。 因此，通用解决方案可以是： 演示： http : //jsfiddle.net/tqgNb/
-
我在nuxt移动端项目中，使用rem计算根节点字体大小，但是有一个问题：打开页面，浏览器运行到这段代码时，页面已经有内容在展示了；根节点字体大小赋值后，会让页面内容重绘，导致 页面在第一次打开的时候，会有css的扭曲变动，请问如何避免这样的情况发生？
-
我有一个可编辑的div内容，我保存了一些html文本。我添加了属性< code>runat="server",并希望用c#获得html文本内容。有人能帮我吗？这是我的< code>div PS：不起作用！！ PS2：我的目的通常就像这里一样。我想从允许的div中获取数据并将其用作HTML字符串 已解决：