Delicious LinkedIn Facebook Twitter RSS Feed

Cambiar estilos CSS con JavaScript (3)

Estos son otro ejemplos de como hacer cambios:
Ejemplo 1:
<head>

<script>
function cambiaColor(){
var i
for (i=0;i<document.fcolores.colorin.length;i++){
if (document.fcolores.colorin[i].checked)
break;
}
document.bgColor = document.fcolores.colorin[i].value
}
</script>
</head>

<body>
<form name=fcolores>
<input type="Radio" name="colorin" value="ffffff" checked> Blanco
<br>
<input type="Radio" name="colorin" value="ff0000"> Rojo
<br>
<input type="Radio" name="colorin" value="00ff00"> Verde
<br>
<input type="Radio" name="colorin" value="0000ff"> Azul
<br>
<input type="Radio" name="colorin" value="ffff00"> Amarillo
<br>
<input type="Radio" name="colorin" value="00ff00"> Turquesa
<br>
<input type="Radio" name="colorin" value="ff00ff"> Morado
<br>
<input type="Radio" name="colorin" value="000000"> Negro
<br>
<br>
<input type="Button" name="" value="Cambia Color" onclick="cambiaColor()">
</form>
</body>

Ver ejemplo 1:

Ejemplo 2:
<head>

<script>
function cambiaColor(colorin){
document.bgColor = colorin
}
</script>
</head>

<body>
<form>
<input type="Button" value="Rojo" onclick="cambiaColor('ff0000')">
<input type="Button" value="Verde" onclick="cambiaColor('00ff00')">
<input type="Button" value="Azul" onclick="cambiaColor('0000ff')">
</form>
</body>

Ver ejemplo 2:

Ejemplo 3:
<head>

<style type="text/css">

.CustomStyle {
font-family: Courier New;
font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
color: #0000ff;
background-color:#FFFF00;
}

</style>


<script type="text/javascript">
function cambiaColor(color) {
if (document.body.style.backgroundColor!=color)
document.body.style.backgroundColor=color;
else
document.body.style.backgroundColor=color; }
</script>

</head>

<body>
<select name='sel' class="CustomStyle" style="width:209px;">
<option selected>Elegir color</option>
<option onclick="cambiaColor('green');">"Cambiar a verde"</option>
<option value="Cambiar a blanco" name="colorin" onclick="cambiaColor('#ffffff');" />"Cambiar a blanco"
<option value="Cambiar a rojo" name="colorin" onclick="cambiaColor('red');" />"Cambiar a rojo"
<option value="Cambiar a azul" name="colorin" onclick="cambiaColor('blue');" />"Cambiar a azul"
</select>
</body>

Ver ejemplo 3:

0 comments:

Post a Comment