0
346
ViewsExtraña etiqueta HTML <estilo>, no tiene contenido pero existe la regla de estilo
Primero, perdón por mi mal inglés, espero que puedas entender lo que quiero decir.
Quiero preguntar por qué existen estas style rule cuando la etiqueta de estilo no tenía contenido, no tenía idea de qué era. La captura de pantalla de este inspector se capturó en TransferWise Dashboard,
Imagen 1.
En la Imagen 1. (rojo) tiene la clase .css-1r17gmu y tenía la regla padding 24px, border-radius 0px, display flex, etc , pero cuando hago clic en la referencia de ubicación del estilo (azul), la etiqueta de estilo no tenía contenido. (Imagen 2 - Abajo)
Imagen 2.
Quiero copiar el estilo a mi proyecto, pero no tenía idea de cómo es esto y cómo crearlo.
Cuando intento Delete-Undo la etiqueta de estilo (Imagen 2, fondo azul), la etiqueta sigue siendo la misma, pero el estilo desaparece.
Esa es mi pregunta, no sé si esto tiene un duplicado ya que no conozco la palabra clave.
1 answers
Answer question0
Este efecto se puede lograr insertando reglas en la hoja de estilo con .insertRule , lo que da como resultado que la regla en la etiqueta <style> en cuestión se aplique a los elementos en el DOM, pero sin insertar el marcado HTML en la etiqueta <style> . Puede verlo en ese sitio seleccionando la etiqueta de estilo en el inspector y luego haciendo console.dir($0.sheet.cssRules) en la consola:
Si desea copiar el estilo contenido allí, deberá iterar sobre .cssRules .
Ejemplo en vivo de este comportamiento:
document.querySelector('#theStyle').sheet.insertRule('.foo { background-color: yellow; }'); // Text content is still empty: console.log(document.querySelector('#theStyle').textContent); <style id="theStyle"></style> <div class="foo">foo</div>