如何通过 JavaScript 创建 CSS 范围以防止 CSS 影响到页面的另一部分？答案

【问题标题】：How to create a CSS scope by JavaScript to prevent the CSS effect to another part of the page?如何通过 JavaScript 创建 CSS 范围以防止 CSS 影响到页面的另一部分？
【发布时间】：2017-03-01 05:07:22
【问题描述】：

例如：

我有一个页面，代码是：

<!DOCTYPE html>
<html>
<head>
  <style>
    .wrap a {
      color: red;
    }
  </style>
</head>
<body>
  <div class="wrap"><a href="#" class="link">link</a></div>
</body>
</html>

我有一个通用的 JavaScript 组件，它将加载一个 CSS 文件，包括以下代码：

.wrap .link { color: blue; }

然后链接将从red变为blue。

使用 iframe 可以解决此问题，但会导致另一个问题，例如仅在页面的一部分显示两个滚动条或灯箱覆盖。

我无法更改 CSS，但我可以编写一个 JS 加载器，所以你有什么想法来解决这个问题吗？

【问题讨论】：

您的实际要求是什么。您的动态 css 加载正常，您可以使用类名对其进行限制，因此其他部分不会影响该属性。为什么这里需要 iframe？
实际我无法更改页面中的标记或样式以及我加载的 CSS 文件。我想找出一个常见的解决方案，并让 CSS 仅适用于 iframe 等页面的一部分并且没有问题。

标签： javascript html css iframe scope

【解决方案1】：

如果选择器匹配，则将应用一个规则，直到被级联更下方的规则（设置相同的属性）覆盖。

您可以更改选择器以阻止它们匹配您不希望它们匹配的元素，或者您可以覆盖该部分中的所有规则。

因此，您必须调整您的标记和样式。您可以在每个选择器前面加上#wrapper。例如，如果一条规则为 a{color:red}，则将其替换为 #wrapper a {color:red;}。

HTML5 允许scoped stylesheets，但目前只有 Firefox 支持它。不过有一个你可以试试 jQuery 解决方案：https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin。

希望对你有帮助。

【讨论】：

我想找出一个通用的解决方案，因为有太多无法控制的标记或样式代码。

【解决方案2】：

这可能会对你有所帮助。

function changeColor(){
  jQuery(".link").css('color','blue');
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
      .wrap a {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrap"><a href="#" class="link" onclick='changeColor()'>link</a></div>
  </body>
</html>

【讨论】：

我不想改变链接颜色，但是当我加载一些 CSS 文件时，CSS 可能会影响它。
那么延迟加载文件包括可以帮助你。