如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
当前回答
只需检查该元素是否可见, 并返回一个布尔。 jquery 通过在元素中添加无显示来隐藏元素, 所以如果您想要使用纯正的 javascript, 您仍然可以这样做, 例如 :
if (document.getElementById("element").style.display === 'block') {
// Your element is visible; do whatever you'd like
}
您也可以使用jquery, 因为您的代码的其余部分似乎使用这个代码, 而您有小块代码。 类似在jquery的下面的东西, 也为您玩同样的把戏:
if ($(element).is(":visible")) {
// Your element is visible, do whatever you'd like
};
使用 cs 方法在 jquery 中也可以产生同样的结果 :
if ($(element).css('display') === 'block') {
// Your element is visible, do whatever you'd like
}
在检查能见度和显示情况时,您还可以做以下工作:
if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
// Your element is visible, do whatever you'd like
}
其他回答
由于问题只涉及一个要素,本守则可能更适合:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
它与twern的建议相同,但适用于一个单一要素;它与jquery faq中推荐的算法相符。
我们用 jquery's is () 来检查选中元素与其它元素、 选择器或任何 jquery 对象的对比。 此方法沿 dom 元素绕行查找匹配, 满足已传递参数 。 如果匹配, 返回为真, 否则返回为假 。
您也可以使用普通的笔记本进行此项操作 :
function isRendered(domObj) {
if ((domObj.nodeType != 1) || (domObj == document.body)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
return isRendered(domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle(domObj, null);
if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
return isRendered(domObj.parentNode);
}
}
return false;
}
注:
各地工作 , 嵌套元素为 css 工作, 内嵌样式不需要框架 。
因为元素具有可见度: 隐藏或不透明: 0 被视为可见, 因为它们仍然消耗着布局中的空间( 如 jquery 描述为 jquery : 可见选择器) - 我们可以检查元素是否以这种方式真正可见 :
function isElementReallyHidden (el) {
return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
if (isElementReallyHidden(this)) {
booElementReallyShowed = false;
}
});
expect($("#message_div").css("display")).toBe("none");
要检查是否显示 I 使用 :
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
或以下是 sam , 将jquery 选择器保存在一个变量中, 以便在需要它多次时有更好的性能 :
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}