Funciones JS con uso de estilos y clases

Estilo en línea (style):

La función aplicarEstilo() modifica directamente los estilos del elemento HTML usando propiedades del atributo style, como color y fontWeight.

Uso de style.color:

• style.color es una cadena de texto, por lo que para verificar el color, usé una comparación directa (=== "brown").
• Para eliminar un estilo en línea, simplemente asigna una cadena vacía ("") al atributo.

function Estilo() {
    if (elementoSeleccionado) {
        // Verificar si el color actual es 'brown'
        if (elementoSeleccionado.style.color === "brown") {
            elementoSeleccionado.style.color = ""; // Remover el color (vuelve al predeterminado)
        } else {
            elementoSeleccionado.style.color = "brown"; // Cambia el color del texto a marrón
        }
        // Aplicar negrita al texto
        elementoSeleccionado.style.fontWeight = "bold";
    } else {
        alert("Por favor, selecciona un elemento para aplicar el estilo.");
    }
}

Aplicación de fontWeight:

• Se mantiene la misma lógica para aplicar el estilo de negrita (bold).
  

 

Clases CSS (class):

La función aplicarClase() utiliza classList para agregar, eliminar o alternar clases CSS dinámicamente. La clase card añade estilos avanzados definidos en el archivo CSS.

Métodos contains, add, y remove:

• Estos métodos pertenecen al objeto classList, usado para manejar clases CSS, no para estilos en línea.
  

// Función para aplicar o alternar clases CSS
function Clase() {
    if (elementoSeleccionado) {
        if (elementoSeleccionado.classList.contains("objeto")) {
            elementoSeleccionado.classList.remove("objeto"); // Elimina la clase 'objeto'
        } else {
            elementoSeleccionado.classList.add("objeto"); // Aplica la clase 'objeto'
        }
    } else {
        alert("Por favor, selecciona un elemento para aplicar la cobjeto.");
    }
}