Reputation: 475
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
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