Propiedad classList y atributo style

 Diferencias clave entre classList y style:

• classList: Ideal para manejar clases CSS, reutilizables y fáciles de mantener en tu archivo de estilos externo.
• style: Útil para aplicar o modificar estilos específicos en línea de forma directa, pero puede ser menos mantenible en grandes proyectos.

Métodos de classList (para clases CSS)

La propiedad classList tiene métodos útiles para manipular dinámicamente las clases de un elemento HTML:

1. add(clase1, clase2, ...) Agrega una o más clases al elemento. Si la clase ya existe, no la duplica. 

elemento.classList.add('clase1', 'clase2'); 

2. remove(clase1, clase2, ...) Elimina una o más clases del elemento.

elemento.classList.remove('clase1'); 

3. toggle(clase[, force]) Alterna una clase. Si ya existe, la elimina; si no, la agrega. Si se proporciona el argumento force como true, agrega la clase; si es false, la elimina.

 elemento.classList.toggle('clase1');
elemento.classList.toggle('clase1', true); // Fuerza la adición
elemento.classList.toggle('clase1', false); // Fuerza la eliminación 

4. contains(clase) Verifica si el elemento contiene una clase específica. Devuelve true o false.

elemento.classList.contains('clase1'); 

5. replace(oldClass, newClass) Reemplaza una clase existente por otra. 

elemento.classList.replace('claseAntigua', 'claseNueva'); 

 

Propiedades comunes del atributo style (para estilos en línea)

El atributo style permite establecer estilos específicos directamente en un elemento HTML. Algunas propiedades comunes son:

1- Estilos de texto:

• color: Cambia el color del texto.
  

elemento.style.color = 'red';
 

•  fontSize: Cambia el tamaño de la fuente.

elemento.style.fontSize = '16px'; 

•  fontWeight: Define el grosor del texto (por ejemplo, normal, bold).

elemento.style.fontWeight = 'bold';

2- Estilos de fondo:

•  backgroundColor: Cambia el color de fondo.

elemento.style.backgroundColor = 'blue'; 

•  backgroundImage: Establece una imagen de fondo.

 elemento.style.backgroundImage = 'url("imagen.jpg")';

3- Márgenes y espaciado:

•  margin: Define el margen externo.

elemento.style.margin = "15px"; 

•  padding: Define el espaciado interno.

 elemento.style.padding = "20px";

• Cambio dinámico de padding y margin en función del tamaño de la ventana  Este ejemplo ajusta el padding y el margin de un elemento basado en el tamaño actual de la ventana del navegador.

 window.addEventListener("resize", () => {
  const elemento = document.getElementById("miElemento");
  const anchoVentana = window.innerWidth;

  if (anchoVentana < 600) {
    elemento.style.padding = "10px";
    elemento.style.margin = "5px";
  } else if (anchoVentana < 1200) {
    elemento.style.padding = "20px";
    elemento.style.margin = "10px";
  } else {
    elemento.style.padding = "30px";
    elemento.style.margin = "15px";
  }
});
 

• Animación del padding y margin con intervalos:  En este ejemplo, se realiza una animación sencilla aumentando y disminuyendo gradualmente el padding y el margin de un elemento.

 const elemento = document.getElementById("miElemento");
let incremento = true;

setInterval(() => {
  const paddingActual = parseInt(elemento.style.padding || "10");
  const marginActual = parseInt(elemento.style.margin || "5");

  if (incremento) {
    elemento.style.padding = `${paddingActual + 5}px`;
    elemento.style.margin = `${marginActual + 3}px`;
  } else {
    elemento.style.padding = `${paddingActual - 5}px`;
    elemento.style.margin = `${marginActual - 3}px`;
  }

  if (paddingActual >= 50 || paddingActual <= 10) {
    incremento = !incremento;
  }
}, 500);
 

• Aplicar padding y margin basado en el contenido del elemento:  Este ejemplo ajusta dinámicamente el padding y el margin según la cantidad de texto dentro del elemento.

 const elemento = document.getElementById("miElemento");
const texto = elemento.innerText.length;

if (texto < 50) {
  elemento.style.padding = "5px";
  elemento.style.margin = "2px";
} else if (texto < 100) {
  elemento.style.padding = "15px";
  elemento.style.margin = "10px";
} else {
  elemento.style.padding = "30px";
  elemento.style.margin = "20px";
}
 

• Cambio interactivo mediante eventos del mouse:   Este ejemplo utiliza eventos del mouse para alterar los valores de padding y margin de un elemento.

const elemento = document.getElementById("miElemento");

elemento.addEventListener("mouseover", () => {
  elemento.style.padding = "20px";
  elemento.style.margin = "10px";
});

elemento.addEventListener("mouseout", () => {
  elemento.style.padding = "10px";
  elemento.style.margin = "5px";
});
 

4- Bordes y contornos:

• border: Define el estilo del borde (color, grosor, tipo).

 elemento.style.border = '2px solid black';

• borderRadius: Crea bordes redondeados.

 elemento.style.borderRadius = '10px'; 

5- Posicionamiento:

•  position: Define el tipo de posicionamiento (por ejemplo, absolute, relative).

  elemento.style.position = 'absolute'; 

•  top, left, right, bottom: Define la posición relativa del elemento.

  elemento.style.top = '50px';
elemento.style.left = '20px'; 

6- Otros estilos comunes: 

•  display: Cambia la forma en que se presenta el elemento (block, inline, none, etc.).

  codigo a mostrar: -html, -css, -js 

•  opacity: Define la opacidad (valor entre 0 y 1).

  codigo a mostrar: -html, -css, -js 

 

 Uso del Document Object Model (DOM)

 JavaScript proporciona una amplia gama de métodos para manipular el DOM (Document Object Model). 

Funciones para Atributos 

1. element.getAttribute(attributeName)
2. element.setAttribute(attributeName, value)
3. element.hasAttribute(attributeName)
4. element.removeAttribute(attributeName)

// Obtener el valor de un atributo
function getAttributeValue(element, attributeName) {
    return element.getAttribute(attributeName);
}

// Establecer un atributo con un valor
function setAttributeValue(element, attributeName, value) {
    element.setAttribute(attributeName, value);
}

// Verificar si un atributo existe
function hasAttribute(element, attributeName) {
    return element.hasAttribute(attributeName);
}

// Eliminar un atributo de un elemento
function removeAttribute(element, attributeName) {
    element.removeAttribute(attributeName);
}
 

1. element.getAttribute(attributeName) Este método se utiliza para obtener el valor de un atributo específico de un elemento HTML. Permite leer el valor de atributos como id, class, src, href, etc. 

const link = document.getElementById("miEnlace");
const hrefValue = link.getAttribute("href");
console.log(hrefValue); // Muestra el valor del atributo href, como "https://example.com"
 

2.  element.setAttribute(attributeName, value)  Este método permite establecer o modificar el valor de un atributo específico en un elemento HTML. Ayuda a actualizar o agregar atributos dinámicamente en un elemento.

const link = document.getElementById("miEnlace");
link.setAttribute("href", "https://nuevo-enlace.com");
link.setAttribute("target", "_blank");
console.log(link); // El enlace ahora apunta al nuevo URL y se abre en una nueva pestaña.
 

3. element.hasAttribute(attributeName) Este método verifica si un elemento tiene un atributo específico. Útil para comprobar la existencia de un atributo antes de manipularlo.

 const link = document.getElementById("miEnlace");
if (link.hasAttribute("href")) {
  console.log("El enlace tiene el atributo 'href'.");
} else {
  console.log("El enlace no tiene el atributo 'href'.");
}
 

4. element.removeAttribute(attributeName) Este método elimina un atributo específico de un elemento HTML. Permite quitar atributos innecesarios de un elemento.
   

 const link = document.getElementById("miEnlace");
link.removeAttribute("target"); // Elimina el atributo 'target' del enlace.
console.log(link); // Ya no tiene el atributo target.
 

<a id="miEnlace" href="https://original.com" target="_blank">Visitar</a>
<button onclick="actualizarEnlace()">Actualizar Enlace</button>

<script>
  function actualizarEnlace() {
    const link = document.getElementById("miEnlace");
    link.setAttribute("href", "https://nuevo-enlace.com");
    alert("¡Enlace actualizado!");
  }
</script>

 

Funciones para Clases

Las clases son atributos que se asignan a los elementos HTML para definir estilos o comportamientos específicos a través de CSS y JavaScript. Los métodos de classList son esenciales para manipular dinámicamente las clases de un elemento. 

1. element.classList.add(className)
2. element.classList.remove(className)
3. element.classList.toggle(className)
4. element.classList.contains(className)
5. element.className (menos recomendable)

 // Agregar una clase a un elemento
function addClass(element, className) {
    element.classList.add(className);
}

// Eliminar una clase de un elemento
function removeClass(element, className) {
    element.classList.remove(className);
}

// Alternar (agregar o eliminar) una clase
function toggleClass(element, className) {
    element.classList.toggle(className);
}

// Verificar si un elemento tiene una clase
function hasClass(element, className) {
    return element.classList.contains(className);
}

// Establecer o leer las clases de un elemento (menos recomendable que classList)
function setOrGetClassName(element, newClassName = null) {
    if (newClassName !== null) {
        element.className = newClassName; // Establecer todas las clases como una sola cadena
    } else {
        return element.className; // Devolver las clases como cadena
    }
}
 

1. element.classList.add(className) Este método agrega una nueva clase al elemento si aún no existe. Es útil para añadir estilos o comportamientos a un elemento de manera dinámica.

const miDiv = document.querySelector("#miDiv");
miDiv.classList.add("resaltado");
// Ahora el <div id="miDiv"> tiene la clase "resaltado".
 

2. element.classList.remove(className) Este método elimina una clase específica de un elemento. Es útil para quitar estilos o comportamientos específicos de un elemento.

 const miDiv = document.querySelector("#miDiv");
miDiv.classList.remove("resaltado");
// La clase "resaltado" se elimina del <div>.
 

3. element.classList.toggle(className) Este método alterna una clase en un elemento: la agrega si no existe, o la elimina si ya está presente. Es ideal para interruptores (on/off) o activar/desactivar estados dinámicamente.
   

const miDiv = document.querySelector("#miDiv");
miDiv.classList.toggle("resaltado");
// Si "resaltado" no estaba, se agrega; si estaba, se elimina.

4. element.classList.contains(className) Este método verifica si el elemento tiene una clase específica. Permite comprobar la existencia de una clase antes de aplicar acciones.

 const miDiv = document.querySelector("#miDiv");
if (miDiv.classList.contains("resaltado")) {
  console.log("El div tiene la clase 'resaltado'.");
} else {
  console.log("El div NO tiene la clase 'resaltado'.");
}
 

5. element.className (menos recomendable)  Es una propiedad que permite acceder o establecer todas las clases de un elemento como un único string. Puede sobrescribir accidentalmente todas las clases existentes al modificar una, lo que no ocurre con classList.

const miDiv = document.querySelector("#miDiv");
miDiv.className = "nuevoEstilo"; // Sobrescribe TODAS las clases.
console.log(miDiv.className); // Resultado: "nuevoEstilo"
 

¿Por qué usar classList sobre className?

• Ventajas de classList:
• Manipula clases de manera individual.
• Reduce el riesgo de sobrescribir otras clases.
• Proporciona métodos más intuitivos (como add, remove, toggle, contains).

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manipulación de Clases</title>
  <style>
    .resaltado {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="miDiv">Hola, soy un div.</div>
  <button onclick="alternarClase()">Alternar Clase</button>

  <script>
    function alternarClase() {
      const miDiv = document.querySelector("#miDiv");
      miDiv.classList.toggle("resaltado");
    }
  </script>
</body>
</html> 

 

 Funciones para Estilos

1. element.style.property
2. getComputedStyle(element) 
   

// Establecer un estilo en línea a un elemento
function setStyle(element, property, value) {
    element.style[property] = value;
}

// Obtener un estilo calculado de un elemento
function getComputedStyleValue(element, property) {
    const styles = getComputedStyle(element);
    return styles.getPropertyValue(property);
}

// Establecer varios estilos en línea de una vez
function setMultipleStyles(element, styles) {
    for (const [property, value] of Object.entries(styles)) {
        element.style[property] = value;
    }
}
 

 

element.style.property Es una forma de acceder o establecer estilos en línea (inline) directamente en un elemento HTML utilizando JavaScript. Cada propiedad de estilo CSS tiene su equivalente en JavaScript. Se utiliza para aplicar o modificar estilos específicos a un elemento dinámicamente desde el script.

const miDiv = document.getElementById("miDiv");
miDiv.style.color = "red"; // Cambia el texto del div a rojo
miDiv.style.backgroundColor = "yellow"; // Establece el fondo amarillo
miDiv.style.fontSize = "20px"; // Cambia el tamaño del texto
 

• Nota: Los nombres de las propiedades CSS en JavaScript usan camelCase. Por ejemplo, background-color se convierte en backgroundColor.
• Limitación: Solo afecta los estilos en línea del elemento, no los estilos aplicados mediante hojas de estilo externas o internas.

 getComputedStyle(element) Este método devuelve todos los estilos calculados para un elemento, independientemente de si provienen de una hoja de estilos externa, interna o en línea. Te permite acceder a los valores finales de los estilos que el navegador ha aplicado a un elemento. Es útil para leer estilos que no se encuentran directamente en el atributo style.

const miDiv = document.getElementById("miDiv");
const estilos = getComputedStyle(miDiv);

console.log(estilos.color); // Muestra el color aplicado (por ejemplo: "rgb(255, 0, 0)")
console.log(estilos.fontSize); // Muestra el tamaño de la fuente (por ejemplo: "16px")

•  Nota: Los valores devueltos por getComputedStyle son siempre en formato leído por el navegador, como rgb para colores y con unidades explícitas (por ejemplo, px).

Diferencia principal entre style.property y getComputedStyle(element):

Característica	element.style.property	getComputedStyle(element)
Qué accede	Solo estilos en línea (inline styles).	Todos los estilos (inline, externos, internos).
Uso principal	Cambiar estilos dinámicamente.	Leer estilos finales aplicados por el navegador.
Ejemplo de acceso	miDiv.style.color	getComputedStyle(miDiv).color

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Estilos en JavaScript</title>
  <style>
    #miDiv {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="miDiv">¡Hola, soy un div!</div>
  <button onclick="cambiarEstilo()">Cambiar Estilo</button>
  <button onclick="leerEstilo()">Leer Estilo</button>

  <script>
    function cambiarEstilo() {
      const miDiv = document.getElementById("miDiv");
      miDiv.style.color = "green"; // Cambia el color del texto a verde
      miDiv.style.backgroundColor = "lightgray"; // Establece un fondo gris claro
    }

    function leerEstilo() {
      const miDiv = document.getElementById("miDiv");
      const estilos = getComputedStyle(miDiv);
      alert(`El color actual es: ${estilos.color} y el tamaño de fuente es: ${estilos.fontSize}`);
    }
  </script>
</body>
</html>

¿Qué pasa en este ejemplo?

1. Botón "Cambiar Estilo": Modifica el color y el fondo del div utilizando style.property.
2. Botón "Leer Estilo": Usa getComputedStyle para mostrar el color y el tamaño de la fuente que el navegador aplica al div.