Javascript nos permite modificar los elementos HTML de una pagina, por ejemplo, podemos cambiar de forma dinámica las características del body (color de fondo, tipo de letra) o de un elemento div entre otros.
En el primer ejemplo, crearé un script el cual mediante un formulario con un campo de texto permita cambiar el color de fondo de la pagina por el color que seleccionemos en un formulario.
<head>
<script type="text/javascript">
function modificarElemento() {
document.bgColor = document.formulario.color.value;
}
</script>
</head>
<body>
<form name="formulario">
<input type="button" value="Modificar Color" onclick="modificarElemento()">
<input name="color" type="text">
</form>
</body>
|
Éste código está dividido en dos partes, por un lado tenemos en el head el codigo Javascript con la función que hará el cambio de color, por otro lado tenemos en el body un formulario con un boton y un campo de texto, al apretar el boton se cambiará el color de fondo de la página por el color que hayamos escrito en el campo de texto.
El código javascript
Éste código únicamente tiene una función javascript. Podemos ver dentro de la función lo siguiente
document.bgColor = document.formulario.color.value;
document.bgColor indica que queremos trabajar con el elemento body de nuestra pagina y su atributo bgColor.
Si quisieramos trabajar con otro elemento de nuestro documento como una tabla, deberiamos indicar a dicha tabla un atributo id y hacer referencia utilizando tablaID.atributo = valor . Lo veremos mejor en el segundo ejemplo de este artículo
document.formulario.color.value;
formulario hace referencia al valor del atributo name del formulario
color hace refencia al atributo name del campo de texto del formulario.
value hace referencia al valor del campo de texto
En este caso hemos utilizado el valor de un elemento para establecer el color. Tabién podríamos indicar el nuevo valor diréctamente poniendolo entre comillas document.bgcolor = "red"
Por lo tanto podríamos decir que en este código Javascript estamos indicando que el atributo bgcolor de nuestro body sea igual al valor que tengamos escrito en el campo de texto del formulario.
Por ultimo, nuestro boton del formulario tiene un atributo onclick con el que hacemos la llamada a nuestra funcion javascript
<input type="button" value="Modificar Color" onclick="modificarElemento()" >
|
Posiblemente este sea un caso poco practico, ya y que rara vez vamos a necesitar cambiar el color de una pagina, pero lo que importa aqui es que entiendas como funciona este codigo y que sepas que de igual modo que ahora he modificado el elemento body de nuestro documento podemos modificar casa cual otro elemento de nuestro pagina, como una tabla, una capa...
En la siguiente pagina vemos como trabajar con una capa y su atributo
style para modificar sus propiedades CSS
Usuarios que han visto este tema también han visto...
- Cambiar el tamaño de letra dinámicamente
- Ventana en primer plano
- Funcion: alert() confirm() y prompt() en Javascript
- Eliminar frames
- Apagando elementos “select” en Internet Explorer
- Versión imprimible de este documento
- Enviar por e-mail este documento
