I'm writing a GreaseMonkey script that modifies an attribute of an element with a specific ID, but I'm having some problems accessing it due to a nontraditional HTML hierarchy. Here's the relevant HTML:
<body>
...
<iframe id="iframeID">
<html>
...
<body id="bodyID" attribute="value">
...
</body>
...
</html>
</iframe>
...
</body>
Where attribute
is the attribute that I'm attempting to modify.
At first, not realizing I was working with an iframe
and a nested body
tag, I tried this:
document.getElementById('bodyID').setAttribute("attribute","value")
While this worked fine in Firefox, Chrome tells me that I can't set the attribute of null
, suggesting that it cannot find any elements with the id bodyID
. How can I modify this attribute in a cross-browser friendly fashion?
You first need to pull the document of the <iframe>
:
document.getElementById('iframeID').contentDocument
.getElementById('bodyID').setAttribute("attribute","value");
Live DEMO
BTW, if you want to get the <body>
node, you don't need to give id or something like that, simply:
document.body
In your case, it's the document of the <iframe>
:
document.getElementById('iframeID').contentDocument.body.setAttribute("attribute","value");
A lot simpler... Isn't it?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With