如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
我找了这个, 没有一个答案是正确的 我的案子是正确的, 所以我创造了一个功能, 返回假的,如果一个人的眼睛看不到元素
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;
}
}
});
其他回答
这里有一个永久有条件的表达式 来检查元素的状态 然后切换它:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
您也可以使用 plain JavaScript 来做到这一点 :
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 和内嵌样式的工作
不需要框架
有两种方法可以检查元素的可见度。
解决方案 # 1
if($('.selector').is(':visible')){
// element is visible
}else{
// element is hidden
}
解决方案 # 2
if($('.selector:visible')){
// element is visible
}else{
// element is hidden
}
if($("h1").is(":hidden")){
// your code..
}
您可以在显示或隐藏 CSS 类时使用该类的 CSS 类 :
.show{ display :block; }
设置您的j查询toggleClass()
或addClass()
或removeClass();
.
例如,
jQuery('#myID').toggleClass('show')
上述代码将添加show
当元素没有 cs 元素时 cs 类show
当它消逝的时候,show
类。
当你在检查它是否可见, 你可以遵循这个 JQuery 代码,
jQuery('#myID').hasClass('show');
上面的代码将返回布尔值( true) 时返回布尔值#myID
元素中含有我们的类(show
当它没有的时候,是假的,show
类。