JavaScript - Ayuda con DOM/Javascript

   
Vista:

Ayuda con DOM/Javascript

Publicado por Goding (5 intervenciones) el 01/06/2017 20:02:06
Buenas tardes chicos, he visto el siguiente ejemplo:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_color

Pero mi duda es como puedo cambiar el color de todo el texto de mi página HTML utilizando DOM? de tal manera que hay una caja de texto donde se ingresa el color en hexadecimal y luego un botón que al momento de darle aceptar modifique el color del texto asignado por el usuario?

Saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de [abZeroX]

Ayuda con DOM/Javascript

Publicado por [abZeroX] (110 intervenciones) el 01/06/2017 23:17:10
Hola, te comparto un pequeño código que quizás te sirva:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Cambiar color de Texto</title>
</head>
<body>
	<form action="#" id="form">
		<label for="color">COLOR </label>
		<input type="text" id="color" placeholder="Ejemplo: #0000FF" required>
		<p class="error" style="color: #FF0000;"></p>
		<input type="submit" value="Cambiar color">
	</form>
 
	<div class="container">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem tempore itaque, asperiores iure eveniet. Quaerat saepe nam fugit libero deserunt iusto voluptas molestiae laborum, consequatur odit, velit error, ullam assumenda.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem tempore itaque, asperiores iure eveniet. Quaerat saepe nam fugit libero deserunt iusto voluptas molestiae laborum, consequatur odit, velit error, ullam assumenda.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem tempore itaque, asperiores iure eveniet. Quaerat saepe nam fugit libero deserunt iusto voluptas molestiae laborum, consequatur odit, velit error, ullam assumenda.
		</p>
	</div>
 
	<script>
		(function(d) {
			var form = d.getElementById('form');
			var error = d.querySelector('.error');
 
			form.addEventListener('submit', function(e) {
				e.preventDefault();
				var color = d.getElementById('color').value;
 
				error.innerHTML = '';
 
				// Compruebo que sea un color valido
				if (/^(#{1})([0-9A-F]{3}|[0-9A-F]{6})$/ig.test(color)) {
					d.body.style.color = color;
				} else {
					error.innerHTML = 'El color ingresado no es valido';
				}
			});
 
		})(document);
	</script>
</body>
</html>

Nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Revisar política de publicidad