Question

我在将CSS显示属性更改为＆＃34; none＆＃34;时遇到问题。使用javascript

这是我的代码：

<div class="mydiv" onClick="clickDiv1()">hello</div>
<div class="mydiv" onClick="clickDiv2()">hi</div>
<div class="mydiv" onClick="clickDiv3()">goodbye</div>

这是我的剧本：

 function clickDiv1() { 
alert('You clicked the first div!');
document.getElementByClassName('mydiv').style.display="none";
}

 function clickDiv2() {
alert('You clicked the second div!');
document.getElementByClassName('mydiv').style.display="none";
}

 function clickDiv3() {
alert('You clicked the second div!');
document.getElementByClassName('mydiv').style.display="none";
}

我想要的是，不同的div在点击时会提醒不同的文字，但是当点击任何div时，所有div都是不可见的。

当我点击我的div时，警报会执行，但样式不会改变。

为什么它不起作用？请帮帮我!!

Answer 1

区别在于当您使用类document.getElementByClassName('mydiv')时，它会返回一个数组。所以你需要使用document.getElementByClassName('mydiv')[i]，其中i是数组索引。但是document.getElementById('div3')只会给你一个项目。

document.getElementByClassName('mydiv')[0].style.display="none";

或

document.getElementById('div3').style.display="none";

应该有用。

Answer 2

用于选择HTML元素的正确Javascript方法是getElementsByClassName()。

这将返回DOM中具有该类名称的所有元素的数组，您需要循环并单独将显示设置为none。

对于您的示例，此代码可以使用：

function hideAll() {
  var elems = document.getElementsByClassName('mydiv');
  for (i = 0; i < elems.length; i++) {
    var elem = elems[i];
    elem.style.display = 'none';
  }
}

function clickDiv1() {
  alert('You clicked the first div!');
  hideAll();
}

function clickDiv2() {
  alert('You clicked the second div!');
  hideAll();
}

function clickDiv3() {
  alert('You clicked the third div!');
  hideAll();
}

如何使用JavaScript更改CSS显示属性？

2 个答案: