logo

Cómo obtener estilos CSS de un elemento con JavaScript

En JavaScript, a veces, es posible que desee recuperar estilos CSS aplicados a un elemento a través de estilos en línea u hojas de estilo externas. Hay varias formas disponibles para hacer esto, dependiendo de si desea obtener estilos en línea o estilos renderizados.

Obtención de estilos en línea

En JavaScript estándar, la propiedad de estilo DOM se usa para aplicar los estilos a un elemento HTML usando el style atributo.

Digamos que tenemos el siguiente elemento HTML:

<button id="clickMe" style="color: red; font-weight: bold;">Click Me</button>

El siguiente ejemplo muestra cómo obtener la información de estilo del ejemplo anterior:

const btn = document.getElementById('clickMe');
 
// pint color & font weight properties
console.log(btn.style.color); // red
console.log(btn.style.fontWeight); // bold

Sin embargo, el style propiedad solo funciona para los estilos en línea definidos usando style atributo. Si intenta acceder a una propiedad no definida como una regla de estilo en línea, digamos backgroundColor , un null se devolverá el valor:

console.log(btn.style.backgroundColor); // null

El style La propiedad no es realmente útil para obtener información de estilo que viene de otra parte, como las reglas de estilo definidas usando el <style> elementos u hojas de estilo externas.

Obtención de estilos renderizados

Para obtener los valores reales de las propiedades CSS que se usaron para representar un elemento HTML, puede usar el getComputedStyle() método. Este método funciona para todo:estilos en línea, hojas de estilo externas y valores predeterminados del navegador.

Digamos que tiene el siguiente <style> incrustado elemento que define las reglas de estilo para el botón anterior:

<style>
    button {
        background-color: yellow;
        text-align: center;
        height: 20px;
        width: 100px;
    }
</style>

El getComputedStyle() el método siempre se llama en el window con el elemento como parámetro, y devuelve un objeto de propiedades:

const btn = document.getElementById('clickMe');
 
// get all rendered styles
const styles = window.getComputedStyle(btn);

Ahora puede acceder a cualquier propiedad CSS directamente como lo hubiera hecho con el style propiedad. Por ejemplo, para acceder al background-color , puedes hacer:

const backgroundColor = styles.backgroundColor; // rgb(255, 255, 0)

Para obtener la altura y el ancho representados del elemento independientemente de si se definió o no, simplemente haga lo siguiente:

const height = styles.height; // 20px
const width = styles.width; // 100px

Alternativamente, también puede usar el getPropertyValue() en el objeto de estilos para acceder a una propiedad CSS. Acepta el real nombre de la propiedad CSS y no el que se usa para JavaScript:

const fontWeight = styles.getPropertyValue('font-weight'); // 700

El getComputedStyle() El método es muy útil para obtener las propiedades CSS reales que utilizó el navegador para representar el elemento. Funciona en todos los navegadores modernos y antiguos, incluido IE 9 y superior.

Finalmente, el getComputedStyle() El método solo funciona para obtener estilos. No puede usarlo para establecer un estilo específico para un elemento HTML. Para establecer las propiedades CSS, siempre debe usar la propiedad de estilo DOM, como expliqué en un artículo anterior.

Obtención de estilos a partir de pseudoelementos

Los pseudoelementos CSS son extremadamente útiles para diseñar partes de un elemento sin necesidad de elementos HTML adicionales.

Para obtener información de estilo de los pseudoelementos, debe pasar el nombre del pseudoelemento como segundo argumento al getComputedStyle() método.

Digamos que tenemos el siguiente <p> elemento:

<p class="tip">Learn JavaScrit for free!</p>

Aquí está el CSS ::first-letter pseudo elemento aplicado al párrafo anterior:

.tip::first-letter {
  color: green;
  font-size: 22px;
}

Para recuperar la propiedad de color del .tip::first-letter , debe usar el siguiente fragmento de código JavaScript:

const tip = document.querySelector('.tip');

// retrieve all styles
const styles = window.getComputedStyle(tip, '::first-letter');

// get color
console.log(styles.color); // rgb(0, 128, 0)

Resumen

En este artículo, analizamos diferentes formas de obtener estilos CSS de un elemento mediante JavaScript. Deberías usar:

  • La propiedad de estilo DOM para recuperar estilos en línea aplicados a un elemento usando el style atributo.
  • El window.getComputedStyle() método para recuperar estilos calculados aplicados a un elemento a través de <style> elementos y hojas de estilo externas. Para obtener estilos CSS de pseudoelementos, debe pasar el nombre del pseudoelemento como segundo parámetro.