Javascript:创建不继承css的元素

Javascript: Create element that does not inherit css?

本文关键字：css 元素 继承 创建 Javascript      更新时间：2023-09-26

我正在为学校制作一个简单的防油精脚本，它添加了一个丑陋的黄色框，其中包含指向所有网站的一些链接。目前我只是这样做：

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"

此代码运行良好。然而，它继承了它所在网页的样式。有办法防止这种情况吗？除了逐个覆盖所有样式元素之外？

谢谢！

简短回答：不。没有办法阻止继承的css。

长话短说：是的。您应该手动覆盖继承的css规则。

不确定这是否是有史以来最好的方法，但在html5中，你可以使用几乎所有的东西作为标记名-所以为了不让你的div继承div的sites-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

插入iframe而不是div怎么样？iframe不会从其父项继承样式。

如果对如何做到这一点有疑问，请参考这个问题。

您可以查看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），你应该没事。

相关文章：