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

How to change CSS display property using JavaScript?

本文关键字：显示 属性 CSS 更改 何使用 JavaScript      更新时间：2023-09-26

>我在使用 javascript 将 CSS 显示属性更改为"none"时遇到问题

这是我的代码：

<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 时，警报已执行，但样式不会更改。

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

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

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

或 

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

应该工作。

用于选择 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();
}
相关文章：