JavaScript - Ayuda con DOM/Javascript

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 10

Val: 477

Ayuda con DOM/Javascript

Publicado por [abZeroX] (130 intervenciones) el 01/06/2017 23:17:10

Hola, te comparto un pequeño código que quizás te sirva:

<!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 clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar