Obtention ou modification de la propriété de classe CSS avec JavaScript en utilisant le style DOM
Mon objectif est de changer la couleur d'arrière-plan d'une des colonnes dans une table sans s'attaquer à chaque entrée individuellement par Id ou Nom. Je sais qu'il ya plusieurs façons de le faire, et j'ai essayé 3 pour être exact, et je vais avoir des problèmes avec chaque. Par souci de simplicité et de clarté, Dans cette question, je me demande comment réussir à le faire à l'aide de la de l'élément.style.backgroundColor objet dans les DOM. Voici mon code 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);
}
Quand je le lance j'obtiens à peu près le même message d'erreur dans IE, Firefox et Chrome:
impossible de lire la propriété 'backgroundColor' Undefined.
J'ai le sentiment qu'il a quelque chose à voir avec le type de données renvoyé par la document.getElementsByClassName objet DOM. Le site référencé dit qu'elle renvoie un HTMLcollection. D'autres endroits que j'ai trouvé dit qu'elle renvoie à une "liste" des éléments. J'ai essayé de faire un tableau et de l'affectation du résultat sur le tableau et d'accéder à chaque élément du tableau avec une boucle, mais j'ai reçu la même erreur au même endroit. Il se pourrait que je ne sais pas comment gérer une, "collection". En tout cas, j'attendais, de la chaux ou de l'hex ou rvb équivalent, car c'est ce que j'ai défini dans le fichier CSS. Je veux être en mesure de le changer avec Javascript. Toute aide serait grandement appréciée. Merci!
EDIT: Ajout d'arguments pour Shylo Hana, la Réponse à 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;
}
}
source d'informationauteur jgrant
Vous devez vous connecter pour publier un commentaire.
Comme mentionné par Quynh Nguyen, vous n'avez pas besoin de le". " dans le nom de la classe. Toutefois - document.getElementsByClassName('col1') retourne un tableau d'objets. Ceci renvoie un "undefined" valeur car un tableau n'a pas de classe. Vous aurez toujours besoin d'une boucle sur les éléments...
Peut-être mieux
document.querySelectorAll(".col1")
parce quegetElementsByClassName
ne fonctionne pas sous IE 8 etquerySelectorAll
n' (bien que les sélecteurs CSS2).https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
Vous n'avez pas besoin d'ajouter '.' de votre nom de classe. Cela va faire
En outre, puisque vous n'avez pas à définir la couleur d'arrière-plan via javascript, vous ne serez pas en mesure de les appeler directement. Vous devez utiliser la fenêtre.getComputedStyle() ou jquery pour réaliser ce que vous essayez de faire ci-dessus.
Voici un exemple de travail
http://jsfiddle.net/J9LU8/
Nice. Je vous remercie. A Travaillé Pour Moi.
Ne savez pas pourquoi vous avez chargé jQuery. Il n'est pas utilisé. Certains d'entre nous utilisent encore dial up modems et les satellites avec les limitations de bande passante. Moins est plus betterer.