CODEWITHSUNDEEP
javascriptcssgoogle-chrome-extension
user2461391
user2461391

Reputation: 1433

Changing the stylesheet in a div with a chrome extension

Using a chrome extension, I want to change the stylesheet associated with an individual div.

For example, the current page looks like:

<div id="footer">
<link rel="stylesheet" type="text/css" href="linktostylesheet.css">
...
</div>

I would like to not use the that stylesheet, and insert my own:

<div id="footer">
<link rel="stylesheet" type="text/css" href="link to my new stylesheet.css">
...
</div>

I am a little lost with this type of programming. So far I have the following snippet of code in my content script, however I don't think I have the right idea.

d = document.getElementById("footer").getContentDocument();
d.styleSheets[d.styleSheets.length].href = 'newstylesheet.css';

Upvotes: 0

Views: 85

Answers (1)

guest271314
guest271314

Reputation: 1

<link> element should be child of <head> element. You can select the link element by beginning value of href attribute, set href of element to new value.

document.querySelector("link[href^=linktostylesheet]").href = "newstylesheet.css";

Upvotes: 2

Related Questions