Crear cuenta<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script>
/**
* Función que nos indica si una clase de CSS existe en un elemento
* Devuelve true o false
*/function existeClase(elemento,clase)
{return elemento.className.match(new RegExp('(\\s|^)'+clase+'(\\s|$)'));
} /**
* Función para agregar una clase CSS a un elemento
*/function agregarClase(elemento,clase)
{if (!existeClase(elemento,clase))
elemento.className += " "+clase;
} /**
* Función para eliminar una clase CSS de un elemento dado
*/function eliminarClase(elemento,clase)
{if (existeClase(elemento,clase))
{var reg = new RegExp('(\\s|^)'+clase+'(\\s|$)');
elemento.className=elemento.className.replace(reg,' ');
} } /**
* Función llamada desde los botones, donde recibe el nombre de la clase CSS
* a añadir o eliminar, dependiendo de si esta puesta o no la clase en el
* texto
*/function cambiarClaseCSS(clase)
{var elemento=document.getElementById("texto");
if(existeClase(elemento,clase))
{eliminarClase(elemento,clase);
}else{
agregarClase(elemento,clase);
} }</script>
<style>
input {float:left;margin-right:3px;}
#texto {display:inline-block;padding:10px;}
/* Definimos las clases que añadiremos o eliminaremos */.color {color:red;}
.negrita {font-weight:bold;}
.cursiva {font-style:italic;}
.fondo {background:#0f0;}
</style>
</head>
<body>
<div id="texto">Este es un texto de prueba al que se le aplicaran diferentes estilos</div>
<p>
<input type="button" value="Negrita" onclick="cambiarClaseCSS('negrita')">
<input type="button" value="Cursiva" onclick="cambiarClaseCSS('cursiva')">
<input type="button" value="Color" onclick="cambiarClaseCSS('color')">
<input type="button" value="Fondo" onclick="cambiarClaseCSS('fondo')">
</p>
</body>
</html>
No hay comentarios