Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   getElementsByClassName (https://javascript.ru/forum/dom-window/49492-getelementsbyclassname.html)

BeetleJuice541 15.08.2014 13:03

getElementsByClassName
 
Есть 4 div у них стоит clsaa="kar"
Нужно чтобы после нажатия их ширина изменилась.
Я думал что будет работать
var kar = document.getElementByClassName('kar');
kar.style.width="25%";

но не работает,как исправить?что можно сделать?

Pavel M. 15.08.2014 13:15

getElementByClassName возвращает collection
http://help.dottoro.com/ljpxmhgp.php

поэтому нужно циклом будет пройтись по элементам

BeetleJuice541 15.08.2014 13:19

можно подробнее?не очень хорошо знаю js

Pavel M. 15.08.2014 13:29

в ссылке, которую дал есть пример

BeetleJuice541 15.08.2014 14:03

это не то(у меня все гораздо проще

WorM32 15.08.2014 14:10

http://learn.javascript.ru/while-for#цикл-for

BeetleJuice541 15.08.2014 14:16

и для чего ты это сюда скинул?

Pavel M. 15.08.2014 14:23

ниже пример использования getElementsByClassName

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<style>
  .kar {
    border: 1px solid;
    margin: 1em;
  }
</style>
</head>
<body>
  
  <button class="btn1">Изменить ширину</button>
  
  <div class="kar">Hello World</div>
  <div class="kar">Hello World</div>
  <div class="kar">Hello World</div>
  <div class="kar">Hello World</div>
  
  <script>
   
    var btn = document.getElementsByClassName('btn1')[0];

    btn.onclick = function () {
      var kar = document.getElementsByClassName('kar');
      for (var i = 0; i < kar.length; i += 1) {
        kar[i].style.width = "25%";
      }
    }
    
  </script>
  
</body>
</html>

Safort 15.08.2014 18:47

BeetleJuice541,
у тебя getElementByClassName а надо getElementsByClassName
ну и потом их в цикле перебираешь и каждому ставишь нужные стили.

BeetleJuice541 15.08.2014 20:04

спасибо большое


Часовой пояс GMT +3, время: 08:00.