Manejo del DOM #3: Estilos y clases CSS, texto y HTML

Atributo style

Desde JavaScript podemos acceder a estilos CSS en etiquetas HTML, también podemos definir estilos CSS y redefinir su valor a estilos CSS. Veamos un ejemplo a continuación:

Tomaremos de ejemplo la siguiente etiqueta HTML:

<a href="index.html" class="link-home" data-name="enlaceHome" style="background-color: lightpink;">Ir a inicio</a>

Es un enlace que contiene como atributo style, ósea, contiene estilos CSS en línea.

No es recomendable usar estilos en línea, esto es solamente de ejemplo de como se implementan los estilos desde JavaScript.

Para acceder a los estilos desde JavaScript se hace con la notación del punto con la propiedad .style, veamos un ejemplo:

// accedemos al enlace
const $linkhome = document.querySelector(".link-home")

// para acceder a los estilos se hace con la notacion del punto
console.log($linkhome.style)

Al mostrar por consola el resultado, nos devuelve un objeto llamado CSSStyleDeclaration este es un objeto con todas las propiedades con respecto a los estilos CSS, veamos la imagen:

Observemos, primero nos muestra enumeradas las propiedades que son afectadas por el elemento HTML y las que hemos definido en su atributo style. Además nos muestra todas las propiedades CSS que podemos acceder, pero, la mayoría no tienen un valor, solamente tienen valor las propiedades que han sido definidas en el atributo style y las que tienen mayor relevancia al elemento HTML.

Veamos la imagen:

Con la notación del punto podemos acceder al valor de una propiedad en especifico, veamos un ejemplo:

// podemos acceder a una propiedad en especifico
console.log($linkhome.style.backgroundColor)

Este nos devolverá su valor establecido por el elemento HTML o establecido en su atributo style.

Con la notación del punto accedemos a los estilos de un elemento siempre y cuando estén definidos en su atributo style, de igual manera al definir valor a estilos CSS con la notación del punto, estos se añaden al atributo style del elemento HTML.

.getComputedStyle()

Es un método que nos devuelve un objeto en forma de mapa con todas las propiedades CSS de un elemento con estilos previamente definidos. Tomaremos de ejemplo el enlace anterior a los ejemplos previos.

console.log(getComputedStyle($linkhome))

Al método .getComputedStyle() se le pasa como parámetro el elemento que queramos analizar sus estilos CSS. Este nos devolverá todo un mapeo de propiedades CSS que han sido definidos al elemento en cuestión.

Si queremos acceder a una propiedad en especifico con este método, se usa otro método llamado:

.getPropertyValue()

Este método nos devuelve el valor de una propiedad CSS que ha sido definida a un elemento, veamos como podemos usarla:

console.log(getComputedStyle($linkhome).getPropertyValue("background-color"))

Así obtendremos el valor de cualquier propiedad CSS, siempre y cuando esta propiedad tenga valor y haya sido definida previamente al elemento en cuestión.

.setProperty()

Este método nos permite definir estilos CSS a elementos HTML desde JavaScript, estos estilos se terminan de asignar como estilos en línea en su atributo style del elemento.

No es recomendable hacerlo, ya que estos estilos se terminan quedando en el atributo style del elemento, lo cual afecta al SEO de la página, se usa solamente en casos especiales, aunque no se recomienda hacerlo.

Veamos un ejemplo de como se pueden asignar estilos a propiedades CSS con este método:

$linkhome.style.setProperty("text-decoration", "none")
$linkhome.style.setProperty("display", "inline-block")
$linkhome.style.setProperty("padding", "8px 16px 8px 16px")
$linkhome.style.setProperty("border-radius", "5px")

Clases CSS desde JavaScript

Desde JavaScript podemos asignar clases CSS a elementos HTML, así como podemos asignar elementos también podemos removerlos.

Veamos un ejemplo, tomaremos de ejemplo el siguiente código HTML:

<section class="cards">
    <figure class="card">
        <img src="https://picsum.photos/id/237/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/23/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/137/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/267/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/27/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>

    <figure class="card">
        <img src="https://picsum.photos/id/239/200/200" alt="card">
        <figcaption>Card</figcaption>
    </figure>
</section>

Tenemos un contenedor con elementos figure con una imagen y una descripción, agreguemos un poco de estilos:

.card {
    display: inline-block;
    background-color: darkslateblue;
    color: lightcyan;
}

.card figcaption {
    padding: .5rem 1rem;
    text-align: center;
}

El resultado es el siguiente:

Hasta este punto tenemos las clases CSS llamadas .card. Para poder asignar clases CSS a elementos HTML desde JavaScript debemos tenerlas ya definidas, crearemos las siguientes clases CSS y las asignaremos al elemento HTML desde JavaScript:

.rotate-45 {
    transform: rotate(45deg);
}

.rotate-145 {
    transform: rotate(145deg);
}

Una vez tengamos las clases CSS definidas podemos asignarlas a elementos HTML desde JavaScript, veamos como podemos hacerlo:

// accedemos al primer elemento ".card"
$card = document.querySelector(".card")

// asignando una clase css a elementos
$card.classList.add("rotate-45")

Con la notación del punto accedemos a su listado de clases del elemento e invocamos al método add(), este método recibe como parámetro el nombre de la clase a asignar.

Una vez asignado se verá el resultado:

Podemos notar que se le ha asignado la clase al primer elemento, es por ello que vemos el elemento inclinado.

También podemos remover clases CSS a elementos que ya tengan asignado una clase, veamos como:

// quitando una clase css a elementos
$card.classList.remove("rotate-45") 

Con el método .remove() quitamos la clase al elemento, este recibe como parámetro el nombre de la clase que queremos remover.

También existe otro método llamado .toggle() que recibe como parámetro el nombre de la clase CSS, este método asigna una clase CSS si no ha sido asignado previamente, si ya estaba asignada la clase CSS la removerá del elemento.

$card.classList.toggle("rotate-45")

Texto en HTML desde JavaScript

Para poder introducir texto en algún elemento HTML desde JavaScript podemos usar 3 maneras de hacerlo, veamos como:

Pongamos de ejemplo este código HTML:

<main>
    <article>
        <p id="texto">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel fuga eius fugit, accusantium distinctio quos voluptas tempora voluptatibus similique omnis tempore quam, iste sed ad beatae dolores reiciendis laudantium soluta!
        </p>
    </article>
</main>

Ahora obtengamos estos elementos desde JavaScript y creamos una variable con un parrafo:

let $texto = document.getElementById("texto")

let parrafo = `
    <p>Este es un ejemplo de como <strong>definir texto</strong> a elemento HTML desde JavaScript</p>
    <br><br>
    <p><i>Primer ejemplo</i></p>
`

Para introducir texto podemos usar la notación del punto utilizando .textContent:

// con textContent, este nos renderiza el texto en una cadena de texto normal
$texto.textContent = parrafo

Veamos el resultado:

Podemos observar que al introducir texto cumple con lo que queremos, pero, si notamos, en el texto tenemos etiquetas HTML, al introducir texto con la notación del punto al usar .textContent este lo renderizado en forma de texto plano de una sola línea.

Para renderizar en formato HTML se usa otra manera usando la notación del punto con .innerHTML:

// con innerHTML nos permite renderizar el codifo en formato HTML, respetando etiquetas y texto segun el contedido definido
$texto.innerHTML = parrafo

Veamos el resultado:

Tambien podemos usar otra manera llamada .outerHTML, este nos permite renderizar código HTML pero reemplazando el elemento padre si sus descendiente son del mismo tipo. Por ejemplo, si en un <p> </p> desde JavaScript introducimos texto en el cual vaya otro <p> </p>, esto no es semántico para nuestra página web, esto hace que evalúe sus descendientes y reemplaza al elemento.

Veamos una imagen:

En la imagen podemos ver señalizadas con unas flechas rojas los párrafos que están dentro de un párrafo, esto semánticamente no es correcto, esto es cuando utilizamos .innerHTML, pero podemos corregir esto con .outerHTML:

$texto.outerHTML = parrafo

Ahora veamos el resultado:

Con esto hemos terminado las diferentes formas de introducir texto en HTML desde JavaScript, cada una de ellas nos permiten introducir texto o renderizar código según nuestro objetivo y lo que queramos introducir en elementos HTML.