Javascript 如何不应用网页'；我正在通过内容脚本插入的div上的CSS？

我正在构建一个chrome扩展，在该扩展中，我在网页主体中插入一个div，并将其CSS位置设置为fixed，以便它在页面上浮动

但是，主机页的CSS会应用到我插入的div上，我不希望发生这种情况。我怎样才能避免呢

---

我尝试应用normalize.css来摆脱主机页应用的css，但这似乎不起作用。

据我所知，有三种解决方案，第一种是理想的：

将您的内容放入iframe。父级的css不会在其中应用

重置元素及其所有子元素上的每个css样式

---

始终使用内联样式。

另一个技巧是编写一个小函数，尝试创建一个唯一的ID（或类名）（本质上，检查ID是否存在，如果存在，则增加一个附加的数字），然后添加一个内联样式脚本，规范化该特定的div及其所有子级，最后使用该唯一ID添加您的div（或类名）

例如：

function addDiv(){
  var uId = (function(){
              for(var r='myUniqueId', i=1; document.getElementById(r+i); i++);
              return r+i;
            })()
  ,   div = document.createElement('div')
  ;

  document.getElementsByTagName('head')[0]
          .appendChild(document.createElement('style'))
          .innerHTML = '#'+uId+ '{background-color:red;}'     //just as example
                     + '#'+uId+ ' .test{background-color:yellow;}';  
  div.id=uId;
  document.getElementsByTagName('body')[0]
          .appendChild(div)
          .innerHTML='<p class="test">foo</p> <br> bar';  //just as example
}

函数addDiv（）{
变量uId=（函数（）{
对于（var r='myUniqueId'，i=1；document.getElementById（r+i）；i++）；
返回r+i；
})()
，div=document.createElement（'div'）
;
document.getElementsByTagName（'head'）[0]
.appendChild（document.createElement（'style'））
.innerHTML='#'+uId+'{背景色：红色；}'//正如示例所示
+“#”+uId+”.测试{背景色：黄色；}”；
div.id=uId；
document.getElementsByTagName（'body'）[0]
.儿童组（分区）
.innerHTML='
foo

bar'；//就像示例一样
}

---

可能重复：另外，您是否尝试过内联样式（或使用javascript使用样式属性）？我没有尝试过内联样式。我会看看。虽然，我必须将它们插入到主机页的头部，对吗？不知道如何做。我也会尝试上面的答案。上面的代码确实有效，但它删除了所有样式，包括我正在应用的样式！我需要与主机页交互。因此，我认为iFrame选项不会ork.@Jatin我找到了那个链接，并制作了一个iframe解决方案的演示。请参阅我的更新。我在扩展中尝试了iframe方法。似乎无法使其工作。我基本上需要在该iframe中安装angular.js应用程序，但angular无法工作，似乎iframe无法访问我希望它访问的脚本。@Jatin也可以这样做，但它脱离了topic。如果您对iframe和脚本的所有详细信息提出疑问，我将很乐意提供帮助。发布问题的链接，我将试一试。我在iframe中找到了它！感谢您的帮助！感谢！）