Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   спрятать/объект + css (https://javascript.ru/forum/misc/42732-spryatat-obekt-css.html)

Faab 07.11.2013 11:50

спрятать/объект + css
 
В JQuery я умею делать кое-какие действия. А как это делать в JS?

1) Как с JS спрятать/показать элемент документа?
2) Как добавить элементу новое CSS-свойство?

Спасибо

рони 07.11.2013 12:01

Faab,
Эта глава — о свойствах стиля, получении о них информации и изменении при помощи JavaScript

Faab 07.11.2013 12:53

Спасибо. Именно то что хотел узнать.

У меня есть такие элементы.

<style type="text/css" media="screen">
.disNone {
  display: none;
}
</style>
<script>
window.onload = function(){
  var eMainButton = document.getElementById('hoofdknop'); 
  eMainButton.onclick = function(){
    var eDivImages = document.querySelectorAll('.toogle');
    //var sClassList = 
    eDivImages.classList.add('disNone');
    //alert(sClassList);
  }; 
};
</script>

   <button id="hoofdknop">Alle schermen verbergen</button>
   <dd>de Wizard Site definition verschijnt, je beantwoordt een aantal vragen
      <div class="toggle"><img class="screenshot" width="238" height="222" src="../images/clip_image014.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Hoe wil u de website noemen?&rdquo; </dt>
    <dd>vul in <i> George&rsquo;s site</i>
      <div class="toggle"><img class="screenshot" width="310" height="307" src="../images/clip_image002.gif" alt="schermafdruk"> </div>
    </dd>


Выходит ошибка: TypeError: eDivImages.classList is undefined
eDivImages при контрольном выводе выдаёт Object NodeList

рони 07.11.2013 13:05

Faab,
каждому елементу eDivImages надо присвоить класс а не всем хором

Faab 07.11.2013 13:13

Перебрать в цикле?

рони 07.11.2013 13:22

Цитата:

Сообщение от Faab
Перебрать в цикле?

да

Faab 07.11.2013 14:45

var eSubButton = document.createElement('input');
eSubButton.type = "button";
eSubButton.value = "Behind";
var eDivTootgle = document.querySelectorAll('.toggle'); // toggle
  // alert(eDivTootgle.length);
var i = 0;
for(i=0; i<eDivTootgle.length; i++){
    eDivTootgle[i].appendChild(eSubButton);
};


Так элемент кнопка добавляется только к последнему диву, а мне надо к каждому. Нужно кажый раз создавать новую кнопку или клонировать объект? Как лучше?

var i = 0; перед циклом нужна или нет?

рони 07.11.2013 14:50

Цитата:

Сообщение от Faab
Нужно кажый раз создавать новую кнопку или клонировать объект? Как лучше?

да и оба варианта приемлимы, как вам удобнее

BETEPAH 07.11.2013 15:27

Цитата:

Сообщение от Faab
В JQuery я умею делать кое-какие действия. А как это делать в JS?

Возможно, эта статья будет тоже полезна:
Нативные эквиваленты функций jQuery

Faab 07.11.2013 16:14

Что то я понимаю. Приведу сначало весь скрипт, а потом вопросы.

function createButton(){
    var eSubButton1;
    eSubButton1 = document.createElement('input');
    eSubButton1.type = "button";
    eSubButton1.value = "Behind";
    return eSubButton1;
  };
  
  var eArticle, eImages, eImage, sClassList, eSubButton;
  var eMainButton = document.getElementById('hoofdknop');

  var eDivTootgle = document.querySelectorAll('.toggle'); // toggle
  // alert(eDivTootgle.length);

  for(i=0; i<eDivTootgle.length; i++){
    eSubButton = createButton();
    eDivTootgle[i].appendChild(eSubButton);
  }; //parentNode
  
  eSubButton.onclick = function(){
    // alert(eSubButton.value);
  };




Когда кнопки добавились, мне надо что бы при нажатии на одну из этих кнопок, я выделял ео родителя. Но как? Выделить все кнопки (например через getElementsByTagName) и и на всю коллекцию поставить событие? В JQ такой принцип работы вроде.


Цитата:

Сообщение от BETEPAH (Сообщение 279997)
Возможно, эта статья будет тоже полезна:
Нативные эквиваленты функций jQuery

спасибо


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