Как превратить div Id в класс

Question

Как превратить div Id в класс

0

Я кодирую веб-сайт, который будет определять, находится ли пользователь на Mac или ПК. Я смог заставить его работать как идентификатор, но когда я пробую его как класс, он не работает. Может ли кто-нибудь помочь.

<script language="JavaScript" type="text/JavaScript">
function func1()
{
  var x = navigator.platform;

  if (x == "Win32" )
  {
    document.getElementsByClassName("pcbrowser").style.display = "block";
  } 
  else if (x == "MacIntel")
  {
    document.getElementById("macbrowser").style.display = "block";
  }
}

window.onload=func1

</script>


<span id="macbrowser" style="display:none">MAC</>
<span id="pcbrowser" style="display:none">Yosemite Backup Agent</p>

user3330391 14 апр. 2014, в 19:25

Источник

0

Ваш HTML немного проблематичен: насколько я знаю, вы не можете иметь пустые элементы с назначенными атрибутами. Просто набрать < id=""> не получится, вы должны объявить <div> или что-то подобное. Кроме того, вам нужны кавычки на первый id .
TylerH 14 апр. 2014, в 17:12

Теги:

javascript

html

css3

4 ответа

Ещё вопросы

Ваш HTML немного проблематичен: насколько я знаю, вы не можете иметь пустые элементы с назначенными атрибутами. Просто набрать < id=""> не получится, вы должны объявить <div> или что-то подобное. Кроме того, вам нужны кавычки на первый id .

bobthedeveloper · Answer 1 · 2014-04-14T15-46-00.000Z

getElementsByClassName возвращает HTMLCollection со всеми элементами с этим классом, так что вы должны сделать первый элемент этого HTMLCollection (getElementsByClassName('pcbrowser')[0])

Или вы можете использовать document.querySelector('.pcbrowser') чтобы получить элемент, точку '.' означает класс. Этого не следует делать, если сайт должен работать в старых браузерах, поскольку он совместим только с IE8.

Pointy · Answer 2 · 2014-04-14T14-43-00.000Z

Функция называется getElementsByClassName() (множественное число "Элементы") по какой-то причине: она возвращает NodeList, а не один элемент. (Это, в частности, "HTMLCollection").

Если определенно один такой элемент, то:

document.getElementsByClassName("pcbrowser")[0].style.display = "block";

В противном случае вы можете более точно выполнять итерацию через NodeList, как если бы это был массив. Не совсем так, как если бы это был массив; если вы планируете вносить изменения в связанные элементы, тогда все может стать странным, потому что этот API возвращает NodeList, который "живет" - он динамически отражает состояние DOM. Однако вы можете скопировать его содержимое в простой массив:

var array = [].slice.call( theNodeList, 0 );

Если быть точным, gEBCN () возвращает HTMLCollection , которая немного отличается от NodeList .
@Temu хорошо, я в значительной степени неряшливый о терминологии :)

erosman · Answer 3 · 2014-04-14T16-23-00.000Z

Вот пример...

HTML...

<p id="pcbrowser" class="pc" style="display:none">Yosemite Backup Agent</p>
<p id="macbrowser" class="mac" style="display:none">MAC</p>

JavaScript...

// anonymous function that runs automatically
(function() {

switch (navigator.platform) {

  case 'Win32':
    // use one of these methods
    var p = document.getElementById('pcbrowser'); // by id
    var p = document.querySelector('#pcbrowser'); // by id, slower than above
    var p = document.querySelector('.pc'); // by class, only the first element with that class
    var p = document.getElementsByClassName('pc')[0]; // by class, only the first element with that class

    // change the style if found
    if (p) {
      p.style.display = 'block';
    }
    break;

  case 'MacIntel':
    // use one of these methods
    var p = document.getElementById('macbrowser'); // by id
    var p = document.querySelector('#macbrowser'); // by id, slower than above
    var p = document.querySelector('.mac'); // by class, only the first element with that class
    var p = document.getElementsByClassName('mac')[0]; // by class, only the first element with that class

    // change the style if found
    if (p) {
      p.style.display = 'block';
    }  
    break;
}

})();

Удачи :)

спасибо, но мне нужно добавить класс в несколько тегов <p>. Как я это сделал.
Я понял, что вы хотите использовать класс (или ID), чтобы найти элемент и изменить его стиль. Вам нужно добавить / изменить его класс? Если вы хотите изменить класс элемента, это также возможно. Получив элемент (из одного из упомянутых методов), вы можете изменить его класс. Пример: element.className = 'newClassName';

TriniBoy · Answer 4 · 2014-04-14T14-53-00.000Z

Ну вот:

var elements = document.getElementsByClassName("pcbrowser");
for (var i=0, item; i<elements.length; i++) {
    elements[i].style.display = "block";
}