Javascript：如何检查元素是否在屏幕上“显示”？

Question

第1步：

当我使用JavaScript更改元素的display属性的值时：

document.getElementById("myDiv").style.display = "none";

它会改变我在浏览器中看到的内容，但它不会改变服务器端HTML脚本中的任何内容。

第2步 - 问题：

问题是在完成上述步骤后，我必须检查屏幕上是否显示#myDiv。如果是的话，我会做点什么。所以我需要使用条件表达式，如：

if (document.getElementById("myDiv").style.display == "none") {
    //do something here
}

但有问题的是这个表达式永远不会计算到true，因为第一步没有改变服务器端HTML上的任何内容。

所以我需要一种方法来检查JS是否在屏幕上显示元素？我该怎么做？

注意： - 不要建议JQuery。我无法使用它。

Answer 1

应该工作的内容。是的，正在运行

[...].style.display = "none";

不会更改服务器存储的HTML; 然而，当您检查相同的属性时，

([...].style.display == "none")

您正在检查内联样式，第一行设置了 。

---

例如，运行

document.getElementById("aDiv").style.display = "none";

将设置#aDiv的内联样式属性：

<div id="aDiv" style="display: none;">

---

JSFiddle

Answer 2

使用visibility属性。

visibility: visible|hidden|collapse|initial|inherit;

document.getElementById("myDiv").style.visibility = "hidden";