Menu
My objective is to change the background color of a columns in a table without addressing each data entry individually by Id or Name. I know there are several ways to do this, and I've tried 3 to be exact, and I'm having problems with each. For the sake of simplicity and clarity, In this question, I'm asking how to successfully do it using the element.style.backgroundColor object in the DOM. Here's my 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> My CSS file:
.col1{ background-color:lime; } And my Javascript file:
function testerFunction() { alert (document.getElementsByClassName('.col1').style.backgroundColor); } When I run it I get roughly the same error in IE, Firefox, and Chrome:
cannot read property 'backgroundColor' of Undefined.
I have a feeling it has something to do with the data type returned by the document.getElementsByClassName DOM object. The referenced website says it returns an HTMLcollection. Other places I've found says it returns a "list" of elements. I tried making an array and assigning the result to the array and accessing each element in the array with a loop, but got the same error at the same place. It might be that I just don't know how to handle a, "collection." At any rate, I was expecting, "lime" or the hex or rgb equivalent because that's what I defined in the CSS file. I want to be able to change it with Javascript. Any help would be much appreciated. Thanks!
EDIT: Added arguments to Shylo Hana's Answer to make it more modular
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; } } 
659
With JavaScript, we are able to set CSS styles for one or multiple elements in the DOM, modify them, remove them or even change the whole stylesheet for all your page.
The HTML DOM allows JavaScript to change the style of HTML elements.
As mentioned by Quynh Nguyen, you don't need the '.' in the className. However - document.getElementsByClassName('col1') will return an array of objects.
This will return an "undefined" value because an array doesn't have a class. You'll still need to loop through the array elements...
function changeBGColor() { var cols = document.getElementsByClassName('col1'); for(i = 0; i < cols.length; i++) { cols[i].style.backgroundColor = 'blue'; } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
