Question

我正在编写一个网站，用于检测用户是在Mac还是PC上。我已经能够将它作为ID工作但是当我作为一个类尝试它时它不起作用。有人可以帮忙。

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

Answer 1

getElementsByClassName返回带有此类的所有元素的HTMLCollection，因此您必须获取此HTMLCollection的第一个元素（getElementsByClassName('pcbrowser')[0]）

或者您可以使用document.querySelector('.pcbrowser')来获取元素，即点'。'代表阶级。如果该站点必须在旧浏览器上工作，则不应该这样做，因为它仅与IE8兼容。

Answer 2

该函数被称为getElementsByClassName()（复数“元素”），原因是：它返回NodeList，而不是单个元素。（尤其是“HTMLCollection”。）

如果肯定只有一个这样的元素，那么：

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

否则，您可以或多或少地遍历NodeList，就像它是一个数组一样。不是完全就好像它是一个数组;如果您计划对所涉及的元素进行更改，那么事情会变得奇怪，因为该API返回一个“实时”的NodeList - 它动态地反映了DOM的状态。但是，您可以将其内容复制到普通数组中：

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

Answer 3

你走了：

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

Answer 4

这是一个例子......

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

})();

祝你好运：）

如何将div Id转换为类

4 个答案: