我只想显示 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/