Подтвердить что ты не робот

Получение или изменение свойства класса CSS с помощью Javascript с использованием стиля DOM

Моя цель - изменить цвет фона столбцов в таблице, не обращаясь к каждой отдельной записи данных по идентификатору или имени. Я знаю, что есть несколько способов сделать это, и я пробовал 3, чтобы быть точным, и у меня проблемы с каждым. Для простоты и ясности. В этом вопросе я спрашиваю, как успешно это сделать, используя объект element.style.backgroundColor в DOM. Здесь мой 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>

Мой CSS файл:

.col1{
    background-color:lime;  
}

И мой файл Javascript:

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

Когда я запускаю его, я получаю примерно такую ​​же ошибку в IE, Firefox и Chrome:

не может прочитать свойство 'backgroundColor' Undefined.

У меня такое чувство, что оно имеет какое-то отношение к типу данных, возвращаемому объектом DOM document.getElementsByClassName. На указанном веб-сайте говорится, что он возвращает коллекцию HTML. В других местах, которые я нашел, он возвращает "список" элементов. Я попытался создать массив и присвоить результат массиву и получить доступ к каждому элементу массива с помощью цикла, но получил ту же ошибку в том же месте. Возможно, я просто не знаю, как обращаться с "коллекцией". Во всяком случае, я ожидал, "лайм" или эквивалент hex или rgb, потому что это то, что я определил в файле CSS. Я хочу иметь возможность изменить его с помощью Javascript. Любая помощь приветствуется. Спасибо!

EDIT: Добавлены аргументы Shylo Hana Ответ, чтобы сделать его более модульным

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;
    }
}
4b9b3361

ОТВЕТЫ

Ответ 1

Как упомянул Куин Нгуен, вам не нужно "." в className. Однако - document.getElementsByClassName('col1') вернет массив объектов.

Это вернет неопределенное значение, потому что массив не имеет класса. Вам все равно нужно будет перебирать элементы массива...

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

Ответ 2

Вам не нужно добавлять '.' в вашем классе. Это сделает

document.getElementsByClassName('col1')

Кроме того, поскольку вы не определяете цвет фона через javascript, вы не сможете его напрямую вызвать. Вы должны использовать window.getComputedStyle() или jquery для достижения того, что вы пытаетесь сделать выше.

Вот рабочий пример

http://jsfiddle.net/J9LU8/

Ответ 4

Ницца. Спасибо. Работал для меня.

Не уверен, почему вы загрузили jQuery. Он не используется. Некоторые из нас по-прежнему используют коммутируемые модемы и спутник с ограничениями пропускной способности. Меньше становится лучше.

<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>