如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
当前回答
只需通过检查布林值来检查可见性, 例如 :
if (this.hidden === false) {
// Your code
}
i 为每个函数使用此代码。 否则您可以使用( “: 可见” ) 来检查元素的可见度 。
其他回答
我搜索了这个, 没有一个答案 是正确的我的情况, 所以我创造了一个功能, 返回假的,如果一个人的眼睛看不到元素
jQuery.fn.extend({
isvisible: function() {
//
// This function call this: $("div").isvisible()
// Return true if the element is visible
// Return false if the element is not visible for our eyes
//
if ( $(this).css('display') == 'none' ){
console.log("this = " + "display:none");
return false;
}
else if( $(this).css('visibility') == 'hidden' ){
console.log("this = " + "visibility:hidden");
return false;
}
else if( $(this).css('opacity') == '0' ){
console.log("this = " + "opacity:0");
return false;
}
else{
console.log("this = " + "Is Visible");
return true;
}
}
});
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// 'element' is hidden
}
上述方法不考虑父(父)的可见度。 如果要也考虑母( 父) , 您应该使用 .is (“ 隐藏 ” ) 或.is ( “ 可见 ” ) 。
例如,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
上述方法将考虑在以下两种情况下显示可见的 div2 : 看不到 。 但上述方法在许多情况下可能有用, 特别是当您需要找到隐藏的父( 隐藏的父( 隐藏的父) 中是否存在错误时, 因为在这种情况下 : 可见的不会起作用 。
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
通常当检查某物是否可见时, 您会立即直接去做其他事情。 jquery 绑链很容易做到 。
所以,如果您有一个选择器, 并且您想要在它上执行某些动作, 只有当它为可见或隐藏时, 您可以使用过滤器 (“ : 可见 ” ) 或过滤器 (“ 隐藏 ” ) , 然后将它与您想要采取的行动连接起来 。
而不是这样声明:
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
或效率更高,但更丑陋:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
您可以在一条线内完成全部任务:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
您也可以使用普通的笔记本进行此项操作 :
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 工作, 内嵌样式不需要框架 。