HTML:
<p id="miElemento" class="clase-original">Este es un elemento de ejemplo.</p>
<button id="miBoton" onclick="cambiarClase()">Cambiar Clase</button>CSS:
<style>
.clase-original {
color: blue;
}
.clase-modificada {
color: red;
font-weight: bold;
}
</style>
Script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function cambiarClase() {
var elemento = document.getElementById('miElemento');
// Verificar la clase actual y cambiarla
if (elemento.classList.contains('clase-original')) {
elemento.classList.remove('clase-original');
elemento.classList.add('clase-modificada');
} else {
elemento.classList.remove('clase-modificada');
elemento.classList.add('clase-original');
}
}
</script>EJEMPLO:
Este es un elemento de ejemplo.
Ejemplo HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cambiar Clase al Hacer Clic</title>
<style>
.clase-original {
color: blue;
}
.clase-modificada {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="miElemento" class="clase-original">Este es un elemento de ejemplo.</p>
<button id="miBoton" onclick="cambiarClase()">Cambiar Clase</button>
<script>
function cambiarClase() {
var elemento = document.getElementById('miElemento');
// Verificar la clase actual y cambiarla
if (elemento.classList.contains('clase-original')) {
elemento.classList.remove('clase-original');
elemento.classList.add('clase-modificada');
} else {
elemento.classList.remove('clase-modificada');
elemento.classList.add('clase-original');
}
}
</script>
</body>
</html>
