Páginas

▼
▼

lunes, 29 de julio de 2019

Cambiar color usando el DOM en JavaScript

Este artículo forma parte de una serie que trata sobre el DOM (Document Object Model) y su manejo desde JavaScript.
  1. JavaScript manejo del DOM
  2. Manejar el DOM en JavaScript
  3. Cambiar color usando el DOM en JavaScript
  4. JavaScript manejando el DOM por sus etiquetas
  5. JavaScript manejando el DOM con las clases
  6. JavaScript manejando el DOM
En esta ocasión vamos a diseñar un caso práctico donde podemos cambiar el color del texto y del fondo de forma aleatoria pulsando un botón.


HTML

El documento se llama index.html.

Creamos un div con el id="zona". Creamos un botón que al ser pulsado lanza una función de JavaScript.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>manejo del DOM</title>  
   <link href="dom2.css" rel="stylesheet" type="text/css" />  
  </head>  
  <body>  
   <div id="zona">¡Hola!</div>  
   <div>  
    <br>  
    <button type="button" onclick="mifuncion()">Cambia el color aleatoriamente</button>  
   </div>  
   <script src="dom2.js"></script>  
  </body>  
 </html>

CSS

El documento se llama dom2.css. Proporcionamos unos valores iniciales para los colores de texto y fondo. Definimos el tamaño de nuestro rectángulo.

 #zona {  
    width: 200px;  
    height: 60px;  
    background-color: beige;  
    color: grey;  
    text-align: center;  
    font-size: 250%;  
    }  
    button{  
        height:50px;  
        width:150px;  
       }

JavaScript

El documanto se llama dom2.js

Si tuviéramos un valor concreto de color rgb hubieramos escrito, por ejemplo:

rectangulo.style.color='rgb(50,200,100)';

Al usar variables aleatorias hemos tenido que concatenarlas para formar nuestro código.


 var rectangulo=document.getElementById("zona");  
 function mifuncion() {  
  var a=Math.floor(Math.random()*255);  
  var b=Math.floor(Math.random()*255);  
  var c=Math.floor(Math.random()*255);  
  var x=Math.floor(Math.random()*255);  
  var y=Math.floor(Math.random()*255);  
  var z=Math.floor(Math.random()*255);  
  rectangulo.style.backgroundColor='rgb('+a+','+b+','+c+')';  
  rectangulo.style.color='rgb('+x+','+y+','+z+')';  
 }

en

1 comentario: