1

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!

Improve this question
3
  • If your css is written to encompass all elements, then either re-write the css to be less inclusive, or override all the styles. That's it Commented Apr 15, 2016 at 11:13
  • The point is that I didn't write the css. It's added to all websites, not just my own. So I can't alter the css. Commented Apr 15, 2016 at 11:15
  • 1
    Looks like its option #2 then I'm afraid: manually unpicking / restyling the inherited stuff. I dont know much about iframes, but I know they dont pick up the parent css, so maybe that's an option. Like I say, I don't know much though Commented Apr 15, 2016 at 11:17

5 Answers 5

Reset to default
2

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

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

all: unset is extremely bad for performance, better not to use
1

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

Improve this answer

Comments

0

How about inserting an iframe instead of div? iframe will not inherit style from its parent.

If in doubt how to do that please refer to this question.

Improve this answer

Comments

0

You could look into the all property, and do something like:

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)";

Unfortunately this does not work in IE or Safari yet, but as you're using Greasemonkey (only available for Firefox, I believe), you should be fine.

Improve this answer

Comments

0

Yes it's possible by creating Web Components which render their content in the Shadow DOM, or simply attaching a shadow DOM to any element on the page and programmatically adding html/elements to it via JavaScript.

We can also do it declaratively without any JavaScript as follows:

span {
  background: yellow;
}
<div>
  <template shadowrootmode="open">
    <span>I'm a span in the shadow DOM</span>
  </template>
</div>

<span>I'm a span outside the shadow DOM</span>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.