Javascript: Create element that does not inherit css?

Question

I'm making a simple greasemonkey script for school that adds an ugly yellow box with some links to all websites. Currently I simply do this:

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"

This code works fine. However, it inherits the style from the web page it's on. Is there a way to prevent this? Other than overriding all the style elements one by one?

Thanks!

Answer 1

Short answer: No. There is no way to prevent the inherited css.

Long answer: Yes. You should manually override the inherited css rules.

Answer 2

Not sure if it's the nicest way ever to do things, but in html5 you can use close to everything as tag name - so to not let your div inherit the sites css rules for a div, simply don't create a div, but myDiv for example

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

Answer 3

如何插入div代替iframe？ {{1}}不会从其父级继承样式。

如果有疑问如何操作，请参阅this问题。

Answer 4

您可以查看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）时，您应该没问题。