div 显示问题?用document.getelementById 与document.getelementByname有啥区别呢

Posted 2023-03-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div 显示问题?用document.getelementById 与document.getelementByname有啥区别呢相关的知识，希望对你有一定的参考价值。

document.getelementById：通过id寻找标签
document.getElementsByTagName：通过标签名称寻找标签，返回的是个数组
document.getelementByname：通过标签的name寻找标签
id是唯一的，但name是可以重复的参考技术A <div id="div1" name="div2"></div>
document.getelementById("div1")，document.getelementByname("div2")两个获取的事上面的同一div 参考技术B 一个是根据ID获得一个根据 name获得

JavaScript按钮开关

我正在尝试创建一个简单的移动网站，目标是有一个div我可以点击它打开它下面的div。 html设置为2个div在彼此的顶部，底部div的显示的CSS设置为“none”。在javascript中有一个事件监听器等待点击然后将显示设置为'block'并打开底部div。如何进行相同的操作（重新单击顶部div）将底部div的显示设置回“无”。

目前的基本代码：

document.getElementById('divOne').addEventListener('click',function(){
    document.getElementById('divTwo').style.display = 'block';
});

#divOne {
    border: 1px solid black;
}

#divTwo {
    border: 1px solid black;
    display: none;
}

<div id="divOne">Click me</div>
<div id="divTwo">Hello World!</div>

答案

只需检查元素上是否设置了display: block。

document.getElementById('divOne').addEventListener('click',function() {
    var divTwo = document.getElementById('divTwo');
    if(divTwo.style.display === 'block') {
        divTwo.style.display = 'none';
    } else {
        divTwo.style.display = 'block';
    }
});

#divOne {
  border: 1px solid black;
}

#divTwo {
  border: 1px solid black;
  display: none;
}

<div id="divOne">Click me</div>
<div id="divTwo">Hello World!</div>

另一答案

您可以先检查显示是否为none，然后将其切换为阻止，反之亦然。我将元素的DOM对象存储在变量中以保持其清洁。

document.getElementById('divOne').addEventListener('click', function() {
  var divtwo = document.getElementById("divTwo");
  divtwo.style.display = divtwo.style.display === 'none' ? 'block' : 'none';
});

另一答案

在事件监听器中，您可以检查divTwo的当前显示样式，如果是block，则将其设置为none，反之亦然。像这样的东西：

document.getElementById('divOne').addEventListener('click',function(){
    var divTwo = document.getElementById('divTwo');
    if (divTwo.style.display === 'none') {
        divTwo.style.display = 'block'
    } else {
        divTwo.style.display = 'none'
    }
});

以上是关于div 显示问题?用document.getelementById 与document.getelementByname有啥区别呢的主要内容，如果未能解决你的问题，请参考以下文章