- JavaScript manejo del DOM
- Manejar el DOM en JavaScript
- Cambiar color usando el DOM en JavaScript
- JavaScript manejando el DOM por sus etiquetas
- JavaScript manejando el DOM con las clases
- JavaScript manejando el DOM
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.jsSi 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+')';
}
xd
ResponderEliminar