Este es el código dinámico que se genera y no puedo controlarlo.
<div class="iframe__wrapper">
<iframe height="0" width="0" style="display: block; visibility: visible;" src=""></iframe>
</div>
Esto es lo que quiero lograr, usando javascript. Quiero obtener el valor del atributo de estilo iframe , digamos si este style es 'display: block; visibility: visible;' luego apunte a su clase principal de 'iframe__wrapper' y sobrescriba sus estilos.
No quiero apuntar directamente a la clase 'iframe__wrapper' para actualizar sus estilos porque esa clase se usa en otras páginas.
Y estoy teniendo algunos problemas al usar getElementsByTagName , dice TypeError no detectado.
Notas: hay otro iframe dentro del contenido del cuerpo, así que creo que getElementsByTagName no es el método correcto. El código generado por iframe con ese valor de estilo a veces aparecía dentro de la etiqueta principal, a veces dentro de la etiqueta del cuerpo o incluso dentro de la etiqueta html.
Puedes cambiar/actualizar mi código de la forma más sencilla.
A continuación se muestra mi código y también puede consultarlo aquí 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>
Actualiza tu script con esto
const myIframe = document.getElementsByTagName("iframe")[0];
if (myIframe) {
myIframe.style.cssText = 'display: block; visibility: visible;';
}
const parentDiv = myIframe.parentElement.className += ' iframe__wrapper--updated';
console.log(myIframe);