es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo mostrar el tipo de letra actual que está utilizando H1 mediante JS?

04 Aug, 2023 Programación

Estoy tratando de crear una herramienta para mi sitio de WordPress que muestre los estilos actuales de ciertos selectores de CSS. Es decir, me gustaría mostrar en qué fuente (y más adelante en qué color) se debe mostrar el h1.

Estaba pensando en usar JS para hacer esto y esto es con lo que empecé:

mi HTML

<h1 id="harold">Este es un título H1</h1>

luego en mi functions.php para probar estoy usando esta función:

/* Script en línea impreso en el pie de página */
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("Tu fuente es: " + h1ID );
        </script>
    <?php
}

Idealmente, esto debería mostrar Helvetica Tu fuente es: contenido de h1ID.

Lo que estoy obteniendo es <cadena vacía> Tu fuente es [object HTMLHeadingElement].

También intenté esto:

var h1ID = document.getElementById('harold');
console.log("Tu fuente es: " + h1ID.style.font );

lo cual solo muestra Tu fuente es:.

Obviamente estoy haciendo algo mal, ¿hay alguna manera de consultar qué fuente debería mostrarse aquí? Idealmente, preferiría solo hacer la consulta por “h1” o “p”, pero no pude averiguar cómo hacerlo.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener la fuente actual de un elemento, puedes utilizar el método window.getComputedStyle() en JavaScript. Modifica tu código existente para utilizar este método de la siguiente manera:

    var h1ID = document.getElementById('harold');
var styles = window.getComputedStyle(h1ID);
console.log("tu fuente es: " + styles.getPropertyValue('font-family'));

    Esto debería mostrar algo como tu fuente es: Helvetica (asumiendo que esa sea la fuente utilizada). Ten en cuenta que el método getPropertyValue() toma el nombre de la propiedad CSS como argumento (en este caso, 'font-family').

    Si deseas obtener los estilos de todos los elementos H1 de tu página, puedes utilizar document.querySelectorAll('h1') para obtener un array de todos los elementos H1, y luego recorrerlos para obtener sus estilos. Aquí tienes un ejemplo:

    var h1s = document.querySelectorAll('h1');
for (var i = 0; i < h1s.length; i++) {
  var styles = window.getComputedStyle(h1s[i]);
  console.log("Estilos para el elemento H1 " + i + ": " + styles.cssText);
}

    Esto mostrará los estilos (fuente, color, etc.) de cada elemento H1 en tu página. Ten en cuenta que styles.cssText retorna una cadena con todos los estilos CSS para el elemento.

Comments are closed.