web-dev-qa-db-fra.com

Obtention ou modification d'une propriété de classe CSS avec Javascript à l'aide du style DOM

Mon objectif est de changer la couleur d'arrière-plan des colonnes d'un tableau sans adresser chaque entrée de données individuellement par identifiant ou nom. Je sais qu'il y a plusieurs façons de le faire, et j'ai essayé 3 d'être exact, et j'ai des problèmes avec chacun. Dans un souci de simplicité et de clarté, dans cette question, je demande comment le faire avec succès en utilisant l'objet element.style.backgroundColor dans le DOM . Voici mon HTML:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="tester.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="tester.js"></script> 
    </head>
    <body>
    <button type="button" onClick="testerFunction()">Test</button>
        <table>
            <tr>
                <th class="col1">Column 1 Header</th>
                <th class="col2">Column 2 Header</th>
            </tr>
            <tr>
                <td class="col1">R1 C1</td>
                <td class="col2">R1 C2</td>
            </tr>
            <tr>
                <td class="col1">R2 C1</td>
                <td class="col2">R2 C2</td>
            </tr>
        </table>
     </body>
 </html>

Mon fichier CSS:

.col1{
    background-color:Lime;  
}

Et mon fichier Javascript:

function testerFunction() {
    alert (document.getElementsByClassName('.col1').style.backgroundColor);  
}

Lorsque je l'exécute, j'obtiens à peu près la même erreur dans IE, Firefox et Chrome:

impossible de lire la propriété 'backgroundColor' de Undefined.

J'ai l'impression que cela a quelque chose à voir avec le type de données renvoyé par l'objet DOM document.getElementsByClassName . Le site Web référencé indique qu'il renvoie une collection HTML. D'autres endroits que j'ai trouvés disent qu'il renvoie une "liste" d'éléments. J'ai essayé de créer un tableau et d'assigner le résultat au tableau et d'accéder à chaque élément du tableau avec une boucle, mais j'ai eu la même erreur au même endroit. Il se peut que je ne sache pas comment gérer une "collection". En tout cas, je m'attendais à "Lime" ou l'équivalent hexadécimal ou RVB parce que c'est ce que j'ai défini dans le fichier CSS. Je veux pouvoir le changer avec Javascript. Toute aide serait très appréciée. Merci!

EDIT: ajout d'arguments à la réponse de Shylo Hana pour la rendre plus modulaire

function testerFunction() {
    changeColumnColor('col1','blue');
}
function changeColumnColor(column,color) {
    var cols = document.getElementsByClassName(column);
    for(i=0; i<cols.length; i++) {
      cols[i].style.backgroundColor = color;
    }
}
javascriptcssdom
17
jgrant

Comme mentionné par Quynh Nguyen, vous n'avez pas besoin du '.' dans le className. Cependant - document.getElementsByClassName ('col1') retournera un tableau d'objets.

Cela retournera une valeur "non définie" car un tableau n'a pas de classe. Vous aurez toujours besoin de parcourir les éléments du tableau ...

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}
44
Shylo Hana

Vous n'avez pas besoin d'ajouter "." au nom de votre classe. Cela fera l'affaire

document.getElementsByClassName('col1')

De plus, comme vous n'avez pas défini la couleur d'arrière-plan via javascript, vous ne pourrez pas l'appeler directement. Vous devez utiliser window.getComputedStyle () ou jquery pour réaliser ce que vous essayez de faire ci-dessus.

Voici un exemple de travail

http://jsfiddle.net/J9LU8/

3
Infinity

Agréable. Merci. A travaillé pour moi.

Je ne sais pas pourquoi vous avez chargé jQuery. Ce n'est pas utilisé. Certains d'entre nous utilisent toujours des modems commutés et des satellites avec des limitations de bande passante. Moins c'est mieux.

<script>
        function showAnswers(){
          var cols = document.getElementsByClassName('Answer');
          for(i=0; i<cols.length; i++) {
            cols[i].style.backgroundColor = 'Lime';
            cols[i].style.width = '50%';
            cols[i].style.borderRadius = '6px';         
            cols[i].style.padding = '10px';
            cols[i].style.border = '1px green solid';
            }
        }
        function hideAnswers(){
          var cols = document.getElementsByClassName('Answer');
          for(i=0; i<cols.length; i++) {
            cols[i].style.backgroundColor = 'transparent';
            cols[i].style.width = 'inheret';
            cols[i].style.borderRadius = '0';
            cols[i].style.padding = '0';
            cols[i].style.border = 'none';          
          }
        }
    </script>
3
Jules Bartow

Peut-être mieux document.querySelectorAll(".col1") parce que getElementsByClassName ne fonctionne pas dans IE 8 et querySelectorAll le fait (bien que les sélecteurs CSS2 uniquement)).

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassNamehttps://developer.mozilla.org/en-US/docs/ Web/API/Document.querySelectorAll

3
Johann Echavarria

Je pense que ce n'est pas la meilleure façon, mais dans mes cas, d'autres méthodes n'ont pas fonctionné.

stylesheet = document.styleSheets[0]
stylesheet.insertRule(".have-border { border: 1px solid black;}", 0);

Exemple tiré de https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

0
RealNeo