javascript - 如何使用 javascript 在 html 中显示一个 div 并隐藏其他所有内容

标签 javascript html

我只想显示 HTML 中的一张图像,并使用 javascript 隐藏其他所有图像。

HTML的结构:

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>
        <div></div>
        <div>
            <img id="nameOfImg">
        </div>
        <div/>
    </div>
    <div></div>
</body>

我遍历了 document.body.children 并隐藏了除我的图像之外的所有内容并且它确实有效,但不幸的是 html 的结构同时发生了变化。所以我尝试找到不同的解决方案,对 html 的更改更健壮。

我的新想法是这样的:

function showImage(idName) {
    document.body.style.display = 'none';
    document.getElementById(idName).parentElement.style.display ='block'
    }

但是那什么也没显示。

最佳答案

你可以试试这个。它遍历所有 div 并检查 div 是否包含您的图像,如果不包含则隐藏它。

var els = document.querySelectorAll('div');
var img = document.getElementById("nameOfImg");

for(var el of els) {
  if (!el.contains(img)) el.style.display = "none";
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>
    <div></div>
    <div>
        <img id="nameOfImg" alt="img" src="test">
    </div>
    <div/>
</div>
<div>7</div>

关于javascript - 如何使用 javascript 在 html 中显示一个 div 并隐藏其他所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57308631/

相关文章:

javascript - 使用 for 循环通过 array.length 向后循环 javascript 数组

javascript - javascript 字符串变量有类似 getElementsByTagName() 的函数吗?

javascript - Typescript/Webpack 检查是否通过生产配置运行

javascript - 制作 Google AdSense 广告以在点击时执行功能

javascript - html Canvas 上的雨滴动画

javascript - 如何使用 Angular Material 对多个复选框进行分组

javascript - 如何创建一个具有可能具有两种类型之一的变量的类

javascript - 输入=范围删除文本字段

html - 是否可以在 DOM 修改发生时检查它们?

javascript - 单击某个元素会触发所有相同的类,而不是单击的类