This is the dynamic code that are generated and I can't control it.

<div class="iframe__wrapper">
    <iframe height="0" width="0" style="display: block; visibility: visible;" src=""></iframe>
</div>

This is what I want to achieve, using javascript. I want to get the iframe style attribute value, lets say if this style is 'display: block; visibility: visible;' then target its parent class of 'iframe__wrapper' and overwrite its styles.

I dont want to target directly the class 'iframe__wrapper' to update its styles because that class is used in other pages.

And I'm having some problems using getElementsByTagName it says Uncaught TypeError.

Notes: There are other iframe inside the body content, so I think getElementsByTagName is not the right method? The iframe generated code with that style value sometimes appeared inside the head tag, sometimes inside the body tag or even inside the html tag.

You can change/update my code in the simplest way.

Below is my code and you can also check it here https://codesandbox.io/

const myIframe = document.getElementsByTagName("iframe");
if (myIframe) {
  myIframe.style.cssText = `
  display: block; 
  visibility: visible;
`;
}
const parentDiv = myIframe.parentElement.className += ' iframe__wrapper--updated';

.iframe__wrapper {
  padding: 100px;
  margin: 100px;
}

.iframe__wrapper--updated {
  padding: 0;
  margin: 0;
}

<div class="iframe__wrapper">
  <iframe style="display: block; visibility: visible;"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
</div>