Javascript add style tag to head

Question

I'm trying to add some css to an internal stylesheet with javascript. This is the code I've used:

function googleJS(){
    var iframe = document.getElementsByTagName('iframe')[0];
    var doc = iframe.contentWindow.document;
    var newScript = doc.createElement('style');
    newScript.setAttribute('.skiptranslate { display: none; }');
    var bodyClass = doc.getElementsByTagName('head')[0];         
    bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}

However this results in:

<style .skiptranslate {display: none};></style>

What is the proper method to use javascript to insert a style tag with the necessary CSS inside the DOM?

Thanks

as the function name suggests, setAttribute() sets "attributes" for elements. And that's what exactly happens with your code. — mavili
– mavili, Commented Jan 20, 2013 at 17:55

Matt Ball · Accepted Answer · 2013-01-20 17:59:10Z

5

As the name implies (and documentation says) Element.setAttribute:

Adds a new attribute or changes the value of an existing attribute on the specified element.

which is exactly what's happening on the <style> element. To fix this, use .textContent/.innerText or a text element instead of .setAttribute().

function googleJS(){
    var iframe = document.getElementsByTagName('iframe')[0];
    var doc = iframe.contentWindow.document;
    var newScript = doc.createElement('style');
    var content = doc.createTextNode('.skiptranslate { display: none; }');
    newScript.appendChild(content);
    var bodyClass = doc.getElementsByTagName('head')[0];         
    bodyClass.insertBefore(newScript, bodyClass.childNodes[2]);
}

answered Jan 20, 2013 at 17:59

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

4 Comments

Matt Ball Over a year ago

@user208709 you're welcome, but it's really just a matter of reading the docs :)

user208709 Over a year ago

Btw, is it possible to add multiple CSS attributes in the createTextNode?

Matt Ball Over a year ago

Yes, it is. Why don't you just experiment with it? And, like I said, read the docs. There are rich, well-documented APIs for manipulating CSS rules. Go explore! developer.mozilla.org/en-US/docs/DOM/HTMLStyleElement

user208709 Over a year ago

Sorry if I sound lazy, I'm not. I'm just working on a tight schedule and the other members have left the team so I'm working on several solutions all at once and it's just this part that I couldn't find a quick solution.

Hosein · Accepted Answer · 2013-01-20 17:56:03Z

-1

If you can use JQuery: $().css('Property-Name', 'Value');

answered Jan 20, 2013 at 17:56

Hosein

5911 gold badge7 silver badges29 bronze badges

2 Comments

Matt Ball Over a year ago

Who said anything about jQuery? Also, this is not even equivalent to what the OP is trying to do.

Matt Ball Over a year ago

.css() is still not directly equivalent to inserting a new CSS rule.

Collectives™ on Stack Overflow

Javascript add style tag to head

2 Answers 2

4 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Related