add css to iframe javascript form list of iframes

I am trying to manipulate an iframe (chatbox) when loaded on a webpage. The chatbox loads four iframes with changing id with each pageload. Because the iframe that needs to be manipulated is the last / 4th of the list, i used get elements by tagname (“iframe”).

However, no style is added to the last iframe:

<script> 
window.onload = function() {
   let myiFrame = document.getElementsByTagName("iframe");
   let doc = myiFrame[3].contentDocument;
   doc.body.innerHTML = doc.body.innerHTML + "<style>iframe{dispay:block !important}</style>";
   
    }</script>

Answer

use

myiFrame[3].style.cssText = "display:block !important"

your code will become

<script> 
window.onload = function() {
   let myiFrame = document.getElementsByTagName("iframe");
   myiFrame[3].style.cssText = "display:block !important";
   }
</script>

Sample working code:

<!DOCTYPE html>
<html>
<body>

<p id="myP1" style="display: none!important">This is some text.</p>

<input type="button" onclick="demoDisplay()" value="Show">

<script>
function demoDisplay() {
  document.getElementById("myP1").style.cssText = "display:block !important";
}

</script>

</body>
</html>

Advertisement

Answer