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

Answer 1

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