1

Buenas quisiera que me puedan ayudar estoy realizando en javascript para que una clase se pueda cambiar de color , pero no se que estoy haciendo mal quisiera que me pueda ayudar este es mi codigo :

Javascript:

 <script>
          $(document).ready(function () {

              document.getElementsByClassName("colourButton").style.color = "#FF0000";

          });
    </script>

HTML :

  <form id="form1" runat="server">
        <div>
            <table border="1">
                <tr >
                    <th>nombre</th>
                    <th>apellidos</th>
                </tr>
                <tr class="colourButton">
                    <td >piero</td>
                    <td>Flores</td>
                </tr>
            </table>

        </div>
    </form>

me sale esta imagen:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

5
  • Solo por curiosidad, en que input tienes agregada esa clase ?
    – gama984
    el 21 oct. 2017 a las 14:42
  • @gama984 estoy agregando a un <tr class="colourButton">
    – PieroDev
    el 21 oct. 2017 a las 14:45
  • jajajaja, si estaba revisando con mas detalle y lo vi, ahora te hago un ejemplo de como podrías hacer el cambio
    – gama984
    el 21 oct. 2017 a las 14:45
  • @gama984 muchas Gracias.
    – PieroDev
    el 21 oct. 2017 a las 14:48
  • Cuando es por clase el método te regresa una lista de nodos que contiene todos los elementos que tengan esa clase, por lo que acceder a ellos tiene que ser document.getElementsByClassName("colourButton")[0].style.color = "#FF0000";
    – Yikarus
    el 21 oct. 2017 a las 14:58

2 respuestas 2

1

El problema, es que el método para obtener clases, obtiene una colección de elementos HTML, con la misma clase. Entonces es como un array, pero no puedes usar sus métodos, por eso uso Array.from() , que es como que lo transformara para trabajar con el array

window.addEventListener("DOMContentLoaded",function(){
  var c = document.getElementsByClassName("misma");
  Array.from(c).forEach(e => {
    e.style.color = "red";
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ejemplo clases</title>
</head>
<body>
  <i class="misma">Soy de la misma clase</i>
  <br><br>
  <b class="misma">Yo tambieen!!</b>
  
</body>
</html>

12
  • Mi estimado @eduardo me sale un error aqui :: <script> window.addEventListener("DOMContentLoaded",function(){ var c = document.getElementsByClassName("misma"); Array.from(c).forEach(e => { e.style.color = "red"; }); }); </script>
    – PieroDev
    el 21 oct. 2017 a las 15:02
  • No veo el error, ese es el código encerrado en etiqueta script, además ejecutalo.. Funciona perfectamente el 21 oct. 2017 a las 15:04
  • adjunte la imagen del error en mi pregunta esta es la ultima imagen
    – PieroDev
    el 21 oct. 2017 a las 15:05
  • Mmm, solo adjuntaste una imágen del código, cuál es el error? Este método es el mejor para iterar con clases el 21 oct. 2017 a las 15:06
  • Date cuenta, que la clase que yo puse, no se llama igual que la tuya, la mía era solo un ejemplo. Cambia el nombre de la clase por la tuya, quizás eso te falla. el 21 oct. 2017 a las 15:07
0

Trata esto, le inserte la librería de jquery, espero que te funcione.

          $(document).ready(function () {

     document.getElementsByClassName("colourButton")[0].style.color = "#FF0000";

          });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
        <div>
            <table border="1">
                <tr >
                    <th>nombre</th>
                    <th>apellidos</th>
                </tr>
                <tr class="colourButton">
                    <td >piero</td>
                    <td>Flores</td>
                </tr>
            </table>

        </div>
    </form>

Espero que te funcione.

2
  • Mi estimado esta bien pero el mio seria como una clase no un id
    – PieroDev
    el 21 oct. 2017 a las 14:58
  • listo, jajajaja espero que te funcione jajaja
    – gama984
    el 21 oct. 2017 a las 15:02

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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