Trabajar con estilos en el DOM

Al trabajar con el Modelo de Objetos del Documento (DOM) en JavaScript, la manipulación de estilos es un requisito común. Este artículo cubrirá diferentes métodos para aplicar estilos a elementos del DOM, incluidos los estilos en línea, la configuración de estilos mediante la propiedad style y la manipulación de clases con los métodos de classList. Al finalizar esta guía, tendrás el conocimiento necesario para gestionar y modificar estilos de manera efectiva en tus proyectos web.

Estilos en línea

Los estilos en línea te permiten aplicar CSS directamente a un elemento HTML mediante el atributo style. Este enfoque es útil para cambios de estilo rápidos y puntuales, pero no se recomienda para mantener proyectos a gran escala debido a su falta de escalabilidad y separación de responsabilidades.

Ejemplo

---

<div id="inlineStyleExample">This text will be styled using inline styles.</div>
<button onclick="applyInlineStyle()">Apply Inline Style</button>

<script>
  function applyInlineStyle() {
    const element = document.getElementById('inlineStyleExample');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  }
</script>

Try it Yourself »

En este ejemplo, al hacer clic en el botón se aplicarán estilos en línea al elemento div, cambiando su color de texto a rojo y su tamaño de fuente a 20 píxeles.

Aplicación de estilos mediante la propiedad style

La propiedad style en JavaScript te permite modificar las propiedades CSS de un elemento de forma dinámica. Este método ofrece más flexibilidad que los estilos en línea y te permite cambiar los estilos programáticamente.

Ejemplo

---

<div id="stylePropertyExample">This text will be styled using JavaScript.</div>
<button onclick="applyStyleProperty()">Apply Style Property</button>

<script>
  function applyStyleProperty() {
    const element = document.getElementById('stylePropertyExample');
    element.style.color = 'blue';
    element.style.fontSize = '18px';
    element.style.margin = '10px';
  }
</script>

Try it Yourself »

En este ejemplo, al hacer clic en el botón se aplicarán varios estilos al elemento div usando la propiedad style. El color de texto se establece en azul, el tamaño de fuente en 18 píxeles y se añade un margen de 10 píxeles.

Manipulación de clases

Gestionar las clases es una forma potente de aplicar estilos a los elementos de manera modular y reutilizable. La propiedad classList proporciona métodos para agregar, eliminar, alternar y verificar clases en un elemento. Para una manipulación más avanzada, también están disponibles classList.replace() y classList.item().

Agregar clases

El método add() agrega una o más clases a un elemento.

Ejemplo

---

<div id="addClassExample">This element will have classes added.</div>
<button onclick="addClass()">Add Class</button>

<script>
  function addClass() {
    const element = document.getElementById('addClassExample');
    element.classList.add('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

En este ejemplo, al hacer clic en el botón se agregarán las clases highlight y text-large al elemento div, aplicando los estilos correspondientes.

Eliminar clases

El método remove() elimina una o más clases de un elemento.

Ejemplo

---

<div id="removeClassExample" class="highlight text-large">
  This element will have classes removed.
</div>
<button onclick="removeClass()">Remove Class</button>

<script>
  function removeClass() {
    const element = document.getElementById('removeClassExample');
    element.classList.remove('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

Aquí, al hacer clic en el botón se eliminarán las clases highlight y text-large del elemento div.

Alternar clases

El método toggle() agrega una clase si no está presente y la elimina si lo está.

Ejemplo

---

<div id="toggleClassExample">Click me to toggle the highlight class.</div>
<button onclick="toggleClass()">Toggle Class</button>

<script>
  function toggleClass() {
    const element = document.getElementById('toggleClassExample');
    element.classList.toggle('highlight');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

En este ejemplo, al hacer clic en el botón se alternará la clase highlight en el elemento div.

Verificar clases

El método contains() verifica si un elemento tiene una clase específica.

Ejemplo

---

<div id="containsClassExample" class="highlight">
  This element's classes will be checked.
</div>
<button onclick="checkClass()">Check Class</button>

<script>
  function checkClass() {
    const element = document.getElementById('containsClassExample');
    if (element.classList.contains('highlight')) {
      alert('The element has the highlight class.');
    } else {
      alert('The element does not have the highlight class.');
    }
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

Aquí, al hacer clic en el botón se verificará si el elemento containsClassExample tiene la clase highlight y se mostrará una alerta en consecuencia.

Ejemplo del mundo real: Lista de tareas interactiva

Para demostrar estos conceptos en un escenario del mundo real, crearemos una aplicación simple de lista de tareas interactiva donde podamos agregar y eliminar tareas, y aplicar estilos dinámicamente para indicar las tareas completadas.

---

<div>
  <h2>To-Do List</h2>
  <p>Here, you can add new items, and mark it as completed by clicking on them.</p>
  <input type="text" id="newTask" placeholder="Add a new task" />
  <button id="addTaskButton">Add Task</button>
  <ul id="taskList"></ul>
</div>

<script>
  const newTaskInput = document.getElementById('newTask');
  const addTaskButton = document.getElementById('addTaskButton');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', () => {
    const taskText = newTaskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskItem.classList.add('task');

      taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
      });

      taskList.appendChild(taskItem);
      newTaskInput.value = '';
    }
  });
</script>

<style>
  .task {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .task.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

Try it Yourself »

En este ejemplo, creamos una aplicación de lista de tareas donde se pueden agregar tareas y marcarlas como completadas al hacer clic en ellas. La clase task da estilo a las tareas, mientras que la clase completed, aplicada mediante el método toggle(), indica las tareas completadas.

Mejores prácticas

Para garantizar un código eficiente y mantenible al trabajar con estilos en el DOM, considera las siguientes mejores prácticas:

1. Separación de responsabilidades: Mantén tu HTML, CSS y JavaScript separados. Usa JavaScript para manipular clases en lugar de establecer estilos directamente siempre que sea posible. Este enfoque mantiene la separación de responsabilidades y facilita la gestión de tu código.
2. Evita los estilos en línea: Usa los estilos en línea con moderación. Los estilos en línea pueden saturar tu HTML y hacerlo más difícil de mantener. En su lugar, prefiere agregar y eliminar clases que estén definidas en tu CSS.
3. Usa clases para la reutilización: Define clases reutilizables en tu CSS y usa JavaScript para alternar estas clases. Este enfoque permite un estilo más consistente en toda tu aplicación y facilita la actualización de los estilos.
4. Aprovecha los métodos de classList: Usa los métodos de classList (add, remove, toggle, contains) para gestionar clases de manera eficiente. Estos métodos son sencillos y tienen un buen rendimiento en comparación con manipular la propiedad className directamente.
5. Consideraciones de rendimiento: Ten en cuenta el rendimiento al manipular el DOM. Agrupa los cambios de estilo para minimizar los reflows y repaints, lo cual puede afectar el rendimiento, especialmente en aplicaciones complejas o grandes.

INFO

Usa transiciones y animaciones CSS para efectos visuales más fluidos en lugar de animaciones basadas en JavaScript, ya que suelen ser más eficientes y fáciles de gestionar.

Conclusión

Comprender y manipular estilos en el DOM es esencial para crear aplicaciones web dinámicas e interactivas. Al utilizar estilos en línea, la propiedad style y los métodos de manipulación de clases proporcionados por classList, puedes lograr una amplia variedad de efectos de estilo y mejorar la experiencia del usuario en tu sitio web.

Práctica

¿Cuál de los siguientes métodos de classList se utiliza para agregar una o más clases a un elemento?

add()remove()toggle()contains()