user208709
user208709

Reputation: 475

Javascript add style tag to head

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

Upvotes: 2

Views: 5654

Answers (2)

Matt Ball
Matt Ball

Reputation: 359786

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]);
}

Upvotes: 5

Hosein
Hosein

Reputation: 581

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

Upvotes: -1

Related Questions