Estoy tratando de crear una herramienta para mi sitio de wordpress que muestre los estilos actuales de ciertos selectores css. Es decir, me gustaría mostrar en qué fuente (y color posterior) debería mostrarse h1.
Estaba pensando en usar JS para hacer esto y esto es lo que comencé:
mi HTML
<h1 id="harold">This is a H1 Heading</h1>luego en mi functions.php para probar que estoy usando esta función:
/* Inline script printed out in the footer */ add_action('wp_footer', 'add_script_wp_footer'); function add_script_wp_footer() { ?> <script> var h1ID = document.getElementById('harold'); console.log(h1ID.style.font); console.log("your font is: " + h1ID ); </script> <?php } Idealmente, esto debería generar helevtica your fontis: content of h1ID .
lo que obtengo es <empty string> your font is [object HTMLHeadingElement]
Intenté esto también:
var h1ID = document.getElementById('harold'); console.log("your font is: " + h1ID.style.font ); que solo genera your font is: .
Obviamente, estoy haciendo algo mal, pero ¿hay alguna manera de que pueda consultar qué fuente debería mostrarse aquí? Idealmente, preferiría simplemente consultar por "h1", o "p" o etc., pero no pude encontrar la manera de hacerlo.
Utilice getComputedStyle para calcular el valor del estilo CSS actual. En tu caso, un ejemplo es:
const element = document.getElementById('harold'); const fontFamily = window.getComputedStyle(element).fontFamily;fontFamily .HTMLElement.style devuelve solo los estilos de elementos en línea. Para obtener cualquier estilo establecido a través de CSS, necesita el estilo calculado, devuelto a través getComputedStyle(elem) .elem.innerHTML . var h1ID = document.getElementById('harold'); console.log(getComputedStyle(h1ID).fontFamily); console.log("your font is: " + h1ID.innerHTML); h1 { font-family: Helvetica; } <h1 id="harold">This is a H1 Heading</h1>