4

Quiero cambiar el color de un elemento desde un 'Script' por su clase seleccionando el primer elemento del arreglo que retorna el código:

<!DOCTYPE html>
<html>
<head>
<title>Proyecto Alfabetización</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/style1.css">
<script type="text/javascript">
     var a=document.getElementsByClassName("blue1");
      a[0].style.backgroundColor="blue";


</script>
</head>
<body>

<divclass="main" style="background:url(assets/images/fondos/fondoGris.jpg)">
    <div class="orange">

    </div>

    <div class="blue">

        <div class="blue1"></div>
        <div class="blue1"></div>
        <div class="blue1"></div>
        <div class="blue1"></div>

    </div>


</div>

</body>  
</html>

Esto me retorna el navegador en vez de cambiar el elemento: introducir la descripción de la imagen aquí

¿Alguna sugerencia?

2 respuestas 2

5

Primero, el script se està ejecutando antes que exista ningun elemento de la clase "blue1" por lo que a[0] está vacío y provoca el error que te muestra. Solo que se ejecute después de introducir los elementos debería funcionar. Otro tema es que una vez obtenidos la lista de los objetos que pertenezcan a la clase, para usarlos hay que recorrer el array. Te pongo un ejemplo.

<!DOCTYPE html>
<HTML>
<HEAD>
	<META charset="utf-8">
	<STYLE>
		.blue1 {
			width:100px;
			height:100px;
			border:solid 1px black;
			margin:2px;
		}
	</STYLE>
</HEAD>
<BODY>
<!-- Si el script lo pones aquí, no encuentra ningún elemento -->
	<div class="blue1"></div>
	<div class="blue1"></div>
	<div class="blue1"></div>
	<div class="blue1"></div>
<!-- Aquí ya existen los elementos -->
	<SCRIPT>
		var a=document.getElementsByClassName("blue1");
		for (var i=0; i<a.length; i++) a[i].style.backgroundColor="blue";
	</SCRIPT>
</BODY>  
</HTML>

1
  • Muchas gracias funcionó perfectamente! Commented el 7 ago. 2016 a las 3:26
1

también si se desea seguir cargando el script en la cabecera del documento se puede usar window.onload para ejecutar el script cuando los elementos html ya se han creado. En http://tpec05.blogspot.com/2017/11/como-cambiar-el-color-de-un-elemento.html puedes encontrar otros ejemplos más.

<!DOCTYPE html>
<html>
<head>
<title>Proyecto Alfabetización</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/style1.css">
<script type="text/javascript">
  window.onload = function(e) {
     var a=document.getElementsByClassName("blue1");
      a[0].style.backgroundColor="blue";

  }
</script>
</head>
<body>

<divclass="main" style="background:url(assets/images/fondos/fondoGris.jpg)">
    <div class="orange">

    </div>

    <div class="blue">

        <div class="blue1"></div>
        <div class="blue1"></div>
        <div class="blue1"></div>
        <div class="blue1"></div>

    </div>


</div>

</body>  
</html>

1
  • Gracias por la edición Jesus! @jesustepec , recuerda revisar Cómo responder para que tus contribuciones sean siempre de ayuda a la comunidad, saludos!
    – Jorgesys
    Commented el 30 nov. 2017 a las 17:05

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.