005. DOM: Estilos y Variables CSS

En este capítulo veremos como poder interactuar con los estilos de nuestros elementos HTML. En este caso vamos a hacer uso de una propiedad denominada style mediante la notación del punto, en vez de utilizar getAttribute(). Lo vamos a empezar a ver con un ejm.

Ejm

<h1>Estilos y variables CSS</h1>
<a class="link-dom"href="dom.html"style="color: black; background-color: #f7df1e;">DOM</a>

<script>
const $linkDOM = document.querySelector(".link-dom");

console.log($linkDOM.style);
// Mostrará todos los estilos disponibles
</script>

Vamos a utilizar la notación del punto, ya que cuando pasamos la propiedad style nos va a devolver un objeto de tipo CSSStyleDeclaration que es un mapa que lleva agregadas todas las propiedades CSS válidas. Dichas propiedades están todas escritas en formato camelCase, hay que recordar que en CSS todas las palabras están separadas por un guión medio (-), pero en Javascript, el guión medio podría representar una resta numérica, por lo que puede llamar a error, por lo que Javascript transforma todas las propiedades CSS quitándole el guión medio y utilizando la técnica del lowerCamelCase (a partir de la segunda palabra, la primera letra es MAY).

Podríamos verlo utilizando el método getAttribute(), como en el siguiente ejm.

Ejm

console.log($linkDOM.getAttribute("style");
// Mostrará los style a los que le hayamos pasado valor

Acceder a una propiedad en particular

Con la notación del punto es muy cómodo, veamos un ejm.

console.log($linkDOM.style.backgroundColor);
// Muestra el color de fondo
console.log($linkDOM.style.color);

Mostrar las Computed Properties o propiedades dinámicas

Para acceder a ellas utilizamos la siguiente notación.

Ejm

console.log(window.getComputedStyle($linkDOM));
// A cada propiedad le asigna un índice

El tipo de mapa que devuelve este formato es ligeramente diferente al de la notación del punto. A cada propiedad se le asigna un índice, las ordena de forma alfabética. Cuando accedemos a las ComputedStyle, después de la lista de definición de las propiedades, nos facilita el valor por defecto que el navegador está dando a esa etiqueta HTML a nivel de propiedades CSS.

Por lo tanto, tenemos dos maneras válidas de ver los estilos CSS, una desde el objeto window con las Computed Properties, y otra con la notación del punto y la palabra style.

Acceder sólo a una propiedad

Para acceder a una única propiedad utilizando Computed Properties utilizamos la propiedad getPropertyValue() de la siguiente manera.

Ejm

console.log(window.getComputedStyle($linkDOM).getComputedValue("color");
// No es necesario poner la palabra window
console.log(getComputedStyle($linkDOM).getComputedValue("color");

En resumen para acceder a los estilos

Tenemos 3 maneras

  • La notación del punto.
  • con getAttribute().
  • con computedStyle.

Establecer valores

Existen diferentes maneras.

  • Con la notación del punto.
  • Con la propiedad setProperty(«propiedad», «valor de la propiedad»): Es similar a cuando establecíamos valores a atributos con el método setAttribute(«atributo», «valor del atributo»). En este caso estamos estableciendo valores a una propiedad CSS.

Ejm con la propiedad setProperty()

$linkDOM.style.setProperty("text-decoration", "none");
$linkDOM.style.setProperty("display", "block");

Ejm con la notación del punto

$linkDOM.style.color = "black";
$linkDOM.style.textAlign = "center";
$linkDOM.style.marginLeft = "auto";
$linkDOM.style.marginRight = "auto";
$linkDOM.style.padding = "1rem";
$linkDOM.style.borderRadius = "0.5rem";

Custom Properties – Variables CSS

Para entender como manipular las Custom Properties vamos a ver un ejm.

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estilos y variables CSS</title>
<style>
  :root {
   --yellow-color: #f7df1e;
   --dark-color: #222;
  }
</style>
</head>

<body>
<h1>Estilos y variables CSS</h1>
<a class="link-dom" href="dom.html" style="color: black; background-color: #f7df1e;">DOM</a>

<script>
const $html = document.documentElement,
$body = document.body;

let varDarkColor = getComputedStyle($html).getPropertyValue("--dark-color");
let varYellowColor = getComputedStyle($html).getPropertyValue("--yellow-color");

console.log(varDarkColor, varYellowColor);

$body.style.backgroundColor = varDarkColor;
$body.style.color = varYellowColor;
</script>
</body>
</html>

Modificar valores

Lo vemos con un ejm.

Ejm

$html.style.setProperty("--dark-color","black");
// Establece el nuevo valor
varDarkColor = getComputedStyle($html).getPropertyValue("--dark-color");
// Activa el nuevo valor

$body.style.setProperty("background-color",varDarkColor);
Scroll al inicio