Getting or changing CSS class property with Javascript using DOM style

Question

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        lt  DOCTYPE html gt   lt html gt       lt head gt           lt link rel  stylesheet  type  text css  href  tester css  gt           lt script src    ajax googleapis com ajax libs jquery 1 4 3 jquery min js  gt  lt  script gt           lt script type  text javascript  src  tester js  gt  lt  script gt        lt  head gt       lt body gt       lt button type  button  onClick  testerFunction    gt Test lt  button gt           lt table gt               lt tr gt                   lt th class  col1  gt Column 1 Header lt  th gt                   lt th class  col2  gt Column 2 Header lt  th gt               lt  tr gt               lt tr gt                   lt td class  col1  gt R1 C1 lt  td gt                   lt td class  col2  gt R1 C2 lt  td gt               lt  tr gt               lt tr gt                   lt td class  col1  gt R2 C1 lt  td gt                   lt td class  col2  gt R2 C2 lt  td gt               lt  tr gt           lt  table gt        lt  body gt    lt  html gt    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 lt cols length  i            cols i  style backgroundColor   color

User · Accepted Answer

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  lt  cols length  i          cols i  style backgroundColor    blue

User · Answer

Nice  Thank you  Worked For Me     Not sure why you loaded jQuery though   It s not used   Some of us still use dial up modems and satellite with bandwidth limitations   Less is more betterer    lt script gt          function showAnswers              var cols   document getElementsByClassName  Answer              for i 0  i lt 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 lt 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                                        lt  script gt

User · Answer

I think this is not the best way  but in my cases other methods did not work   stylesheet   document styleSheets 0  stylesheet insertRule   have-border   border  1px solid black     0     Example from https   www w3 org wiki Dynamic style - manipulating CSS with JavaScript

User · Answer

Maybe better document querySelectorAll   col1   because getElementsByClassName doesn t works in IE 8 and querySelectorAll does  althought CSS2 selectors only    https   developer mozilla org en-US docs Web API document getElementsByClassName https   developer mozilla org en-US docs Web API Document querySelectorAll

User · Answer

If you are looking for sending color data from backend def color        color    quot    06x  quot  format random randint 0  0xFFFFFF       return color

User · Answer

You don t need to add     in your class name  This will do  document getElementsByClassName  col1     Additionally  since you haven t define the background color via javascript  you won t able to call it directly  You have to use window getComputedStyle   or jquery to achieve what you are trying to do above   Here is a working example  http   jsfiddle net J9LU8

[javascript] Getting or changing CSS class property with Javascript using DOM style

Examples related to javascript

Examples related to css

Examples related to dom