Javascript：创建不会继承css的元素？

我正在为学校制作一个简单的greasemonkey脚本，其中添加了一个丑陋的黄色框，其中包含一些指向所有网站的链接。目前我只是这样做：Javascript：创建不会继承css的元素？

var guesses_div = document.createElement("div"); 
guesses_div.style.position = "fixed"; 
guesses_div.style.right = "0"; 
guesses_div.style.bottom = "0"; 
guesses_div.style.backgroundColor = "rgb(255, 255, 0)" 
// here I add some links to the "guesses_div"

此代码工作正常。但是，它从它所在的网页中继承了样式。有没有办法来防止这种情况？除了逐个重写所有样式元素？

谢谢！

来源

2016-04-15 The Oddler

如果你的css被写成包含所有元素，那么要么重新编写css来减少包容性，要么覆盖所有的样式。就是这样 – ne1410s

问题是我没有写css。它被添加到所有网站，而不仅仅是我自己的网站。所以我不能改变CSS。 –

看起来像它的选项＃2然后我害怕：手动unpicking/restyling继承的东西。我不太了解'iframes'，但我知道他们不会拿起父母的CSS，所以也许这是一个选择。就像我说的，虽然我不太了解 – ne1410s

简答题：不。没有办法阻止继承的CSS。

长答案：是的。您应该手动覆盖继承的CSS规则。

来源

2016-04-15 11:13:26

不知道它是否是最好的做法，但在html5中，您可以使用一切接近标签名称 - 所以不要让你的div继承div的网站css规则，只是不要创建一个div，但myDiv例如

var guesses_div = document.createElement("myDiv"); 
guesses_div.style.position = "fixed"; 
guesses_div.style.right = "0"; 
guesses_div.style.bottom = "0"; 
guesses_div.style.backgroundColor = "rgb(255, 255, 0)"

FIDDLE

来源

2016-04-15 11:15:56 baao

如何插入iframe代替div？ iframe将不会继承其父项的样式。

如果有疑问该怎么办，请参考this的问题。

来源

2016-04-15 11:26:21 glu

你可以看着all属性，这样做：

var guesses_div = document.createElement("div"); 
guesses_div.style.all = "unset"; 
guesses_div.style.position = "fixed"; 
guesses_div.style.right = "0"; 
guesses_div.style.bottom = "0"; 
guesses_div.style.backgroundColor = "rgb(255, 255, 0)";

不幸的是，这并不在IE或Safari工作还没有，但你使用的Greasemonkey（仅适用于Firefox，我相信），你应该没问题。

来源

2016-04-15 11:26:28 markmoxx

Javascript：创建不会继承css的元素？

回答

相关问题