使用Dojo 1.9，如何检查元素是否可见？

Question

我可以将以下代码翻译成中文：

我可以使用以下代码隐藏或显示一个字段：

显示元素：

style.set(dojo.byId('fTypeId'), 'display', 'block');

隐藏元素：

style.set(dojo.byId('fTypeId'), 'display', 'none');

我该如何测试这个元素是否显示？

- Jon Mitchell

---

你接受了一个技术上错误的答案。看看Igor的回答吧。我要给这个问题点踩，因为选择错误的答案会误导人们。 - Danubian Sailor

Answer 1

使用检查 style['display'] 的方法存在问题，因为即使元素的 'display' 属性未设置为 'none'，它仍可能被隐藏。例如，'visibility' 可能为 'hidden'，'height' 可能为 '0'，元素可能被另一个元素遮挡等等。根据我的经验，检查元素的高度比检查 display 更可靠。例如：

var isVisible = document.getElementById("myElem").offsetHeight != 0;

这个测试的额外好处在于它不依赖于任何框架...

- Igor Francé

---

这确实是一个更好的解决方案，但你也应该检查 offsetWidth，因为如果一个元素没有宽度，它也是不可见的。这就是 jQuery 在 :visible 和 :hidden 选择器中所做的事情（https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js）。但请注意，与你在答案中提到的不同，当 visibilty: hidden 或 opacity: 0 时，它仍然是可见的，因为它们仍然保持宽度/高度！ - g00glen00b

Answer 2

尝试：

require(["dojo/dom-style"], function(domStyle){
    var isVisible = (domStyle.get("yourNodeId", "display") !== "none");
});

- Philippe

---

这个答案完全是错误的！仅仅检查给定元素的 display 属性是否为 none 是非常幼稚的。有许多情况下该元素可能是不可见的，其中最简单的一种情况是其父元素不可见。这个被接受的答案会误导访问者。 - Danubian Sailor

我同意。对于那个误导性的答案，我很抱歉。访客们请查看得到最多赞的答案。 - Philippe