可以使用.hide()，.show()或.toggle()功能切换元素的可见性。
您如何测试元素是可见还是隐藏？
答案 0 :(得分：8899)
由于问题涉及单个元素，因此该代码可能更合适：
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
与twernt's suggestion相同，但适用于单个元素;它matches the algorithm recommended in the jQuery FAQ
答案 1 :(得分：1374)
您可以使用hidden选择器：
// Matches all elements that are hidden
$('element:hidden')
visible选择器：
// Matches all elements that are visible
$('element:visible')
答案 2 :(得分：873)
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// element is hidden
}
上述方法不考虑父级的可见性。要考虑父母，您应该使用.is(":hidden")或.is(":visible")。
例如，
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
上述方法会将
div2视为:visible，而:visible则不会。但上述情况在许多情况下可能会有用，尤其是当您需要查找隐藏父级中是否有任何错误div时，因为在这种情况下{{1}}将不起作用。
答案 3 :(得分：494)
这些答案都没有解决我所理解的问题，这就是我要搜索的内容，“我如何处理具有visibility: hidden的项目？”。 :visible和:hidden都不会处理这个问题，因为他们都在根据文档查找显示内容。据我所知，没有选择器来处理CSS可见性。以下是我如何解决它（标准的jQuery选择器，可能有更简洁的语法）：
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
答案 4 :(得分：360)
来自 How do I determine the state of a toggled element?
您可以使用:visible和:hidden选择器确定元素是否已折叠。
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
如果您只是根据其可见性对元素进行操作，则只需在选择器表达式中包含:visible或:hidden即可。例如：
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
答案 5 :(得分：268)
通常在检查某些东西是否可见时，您将立即前进并使用它做其他事情。 jQuery链接使这很容易。
因此，如果您有一个选择器并且只想在可见或隐藏时对其执行某些操作，则可以使用filter(":visible")或filter(":hidden")，然后将其与您要执行的操作相关联
所以不是if语句，而是像这样：
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" });
答案 6 :(得分：221)
根据the jQuery documentation的:visible选择器：
- 他们的CSS
display值为none。- 它们是
type="hidden"的表单元素。- 它们的宽度和高度明确设置为0.
- 隐藏了一个祖先元素，因此页面上不会显示该元素。
visibility: hidden或opacity: 0的元素被认为是可见的，因为它们仍会占用布局中的空间。
这在某些情况下很有用而在其他情况下没用，因为如果你想检查元素是否可见（display != none），忽略父母的可见性，你会发现做.css("display") == 'none'不是只会更快，但也会正确返回可见性检查。
如果要检查可见性而不是显示，则应使用：.css("visibility") == "hidden"。
还要考虑the additional jQuery notes：
由于
:visible是jQuery扩展而不是CSS规范的一部分，因此使用:visible的查询无法利用本机DOMquerySelectorAll()方法提供的性能提升。要在使用:visible选择元素时获得最佳性能，请先使用纯CSS选择器选择元素，然后使用.filter(":visible")。
此外，如果您担心效果，请检查 Now you see me… show/hide performance （2010-05-04）。并使用其他方法来显示和隐藏元素。
答案 7 :(得分：196)
这对我有用，我使用show()和hide()来隐藏/显示我的div：
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
答案 8 :(得分：195)
element visibility and jQuery works ;
的方式可以使用display:none，visibility:hidden或opacity:0隐藏元素。这些方法之间的区别：
display:none隐藏元素，它不会占用任何空间; visibility:hidden隐藏了元素，但它仍占用了布局中的空间; opacity:0将元素隐藏为“visibility：hidden”，它仍占用布局中的空间;唯一的区别是不透明度让一个元素部分透明;
if ($('.target').is(':hidden')) {
$('.target').show();
} else {
$('.target').hide();
}
if ($('.target').is(':visible')) {
$('.target').hide();
} else {
$('.target').show();
}
if ($('.target-visibility').css('visibility') == 'hidden') {
$('.target-visibility').css({
visibility: "visible",
display: ""
});
} else {
$('.target-visibility').css({
visibility: "hidden",
display: ""
});
}
if ($('.target-visibility').css('opacity') == "0") {
$('.target-visibility').css({
opacity: "1",
display: ""
});
} else {
$('.target-visibility').css({
opacity: "0",
display: ""
});
}
有用的jQuery切换方法：
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
答案 9 :(得分：152)
我会使用CSS类.hide { display: none!important; }。
为了隐藏/显示，我致电.addClass("hide")/.removeClass("hide")。为了检查可见性，我使用.hasClass("hide")。
如果您不打算使用.toggle()或.animate()方法，这是检查/隐藏/显示元素的简单明了的方法。
答案 10 :(得分：148)
您也可以使用纯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和内联样式
不需要框架
答案 11 :(得分：126)
可以使用hidden或visible属性，例如：
$('element:hidden')
$('element:visible')
或者您可以使用 进行简化，如下所示。
$(element).is(":visible")
答案 12 :(得分：122)
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />
来源：
答案 13 :(得分：118)
ebdiv应设为style="display:none;"。它适用于展示和隐藏：
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
答案 14 :(得分：114)
你应该考虑的另一个答案是，如果你隐藏了一个元素，你应该使用jQuery，但不是实际隐藏它，而是删除整个元素，但你复制了它的HTML内容并将标记本身转换为jQuery变量，然后您需要做的就是使用普通if (!$('#thetagname').length)测试屏幕上是否有这样的标记。
答案 15 :(得分：89)
在jQuery中针对:hidden选择器测试元素时，应该考虑绝对定位元素可以被识别为隐藏，尽管它们的子元素是可见的。
这首先看起来有点违反直觉 - 虽然仔细查看jQuery文档会提供相关信息：
元素可以被认为是隐藏的有几个原因：[...]它们的宽度和高度明确地设置为0. [...]
因此，对于元素的盒子模型和计算样式，这实际上是有意义的。即使未将显式的宽度和高度设置为0，也可以隐式设置 。
看一下以下示例：
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false.foo {
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;
}
.bar {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar"></div>
</div>
更新JQUERY 3.x：
使用jQuery 3，所描述的行为将会改变！如果元素具有任何布局框，包括零宽度和/或高度的布局框，则视为元素。
然后，相同的JS将具有此输出：
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
答案 16 :(得分：84)
这可能有效：
expect($("#message_div").css("display")).toBe("none");
答案 17 :(得分：67)
示例：
$(document).ready(function() {
if ($("#checkme:hidden").length) {
console.log('Hidden');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>
答案 18 :(得分：63)
要检查它是否不可见，请使用!：
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
或者以下也是sam，将jQuery选择器保存在变量中，以便在需要多次时获得更好的性能：
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
答案 19 :(得分：60)
使用为“隐藏”元素指定的类很容易，也是最有效的方法之一。使用Display样式的“无”切换“隐藏”类将比直接编辑该样式执行速度更快。我在Stack Overflow问题 Turning two elements visible/hidden in the same div 中详细解释了其中的一些内容。
以下是Google前端工程师Nicholas Zakas撰写的Google Tech Talk的真实启发视频：
答案 20 :(得分：57)
激活使用可见检查广告拦截器的示例：
$(document).ready(function(){
if(!$("#ablockercheck").is(":visible"))
$("#ablockermsg").text("Please disable adblocker.").show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>
“ablockercheck”是adblocker阻止的ID。因此，检查它是否可见，您可以检测adblocker是否已打开。
答案 21 :(得分：57)
毕竟，没有一个例子适合我，所以我自己写了。
测试（不支持Internet Explorer filter:alpha）：
a）检查文件是否未隐藏
b）检查元素在内联样式中的宽度/高度/不透明度是否为零或display:none / visibility:hidden
c）检查元素的中心（也因为它比测试每个像素/角更快）是否被其他元素（以及所有祖先，例如：overflow:hidden / scroll / one element over hidden）隐藏或屏幕边缘
d）检查元素是否具有零宽度/高度/不透明度或display:none / visibility：隐藏在计算样式中（在所有祖先中）
经过测试
Android 4.4（原生浏览器/ Chrome / Firefox），Firefox（Windows / Mac），Chrome（Windows / Mac），Opera（Windows Presto / Mac Webkit），Internet Explorer（Internet Explorer 5-11文档）模拟+虚拟机上的Internet Explorer 8），Safari（Windows / Mac / iOS）
var is_visible = (function () {
var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
relative = !!((!x && !y) || !document.elementFromPoint(x, y));
function inside(child, parent) {
while(child){
if (child === parent) return true;
child = child.parentNode;
}
return false;
};
return function (elem) {
if (
document.hidden ||
elem.offsetWidth==0 ||
elem.offsetHeight==0 ||
elem.style.visibility=='hidden' ||
elem.style.display=='none' ||
elem.style.opacity===0
) return false;
var rect = elem.getBoundingClientRect();
if (relative) {
if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
} else if (
!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight/2 < 0 ||
rect.left + elem.offsetWidth/2 < 0 ||
rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if(!el.parentNode) return false;
comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
el = el.parentNode;
}
}
return true;
}
})();
使用方法：
is_visible(elem) // boolean
答案 22 :(得分：51)
你需要同时检查......显示和可见性：
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
如果我们检查$(this).is(":visible")，jQuery会自动检查这两件事。
答案 23 :(得分：39)
也许你可以做这样的事情
$(document).ready(function() {
var visible = $('#tElement').is(':visible');
if(visible) {
alert("visible");
// Code
}
else
{
alert("hidden");
}
});<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<input type="text" id="tElement" style="display:block;">Firstname</input>
答案 24 :(得分：34)
通过检查布尔值来检查可见性，例如：
if (this.hidden === false) {
// Your code
}
我为每个函数使用了这个代码。否则，您可以使用is(':visible')来检查元素的可见性。
答案 25 :(得分：33)
因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout（如jQuery :visible Selector所述） - 我们可以通过这种方式检查元素是否真的：
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;
}
});
答案 26 :(得分：31)
但如果元素的CSS如下所示呢？
.element{
position: absolute;left:-9999;
}
因此也应考虑this answer to Stack Overflow question How to check if an element is off-screen。
答案 27 :(得分：30)
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
答案 28 :(得分：30)
可以创建一个函数以检查可见性/显示属性，以便衡量元素是否显示在UI中。
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
答案 29 :(得分：30)
这里还有一个三元条件表达式来检查元素的状态，然后切换它：
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
答案 30 :(得分：26)
.is(":not(':hidden')") /*if shown*/
答案 31 :(得分：19)
if($('#id_element').is(":visible")){
alert('shown');
}else{
alert('hidden');
}
答案 32 :(得分：19)
我搜索了这个，并且没有一个答案对我的情况是正确的，所以我创建了一个函数，如果一个人的眼睛看不到元素，它将返回false
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;
}
}
});
答案 33 :(得分：15)
有很多方法可以检查元素在jQuery中是否可见或隐藏。
演示HTML，例如参考
<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>
使用可见性过滤选择器$('element:hidden')或$('element:visible')
$('element:hidden')：选择隐藏的所有元素。
Example:
$('#content2:hidden').show();
$('element:visible')：选择所有可见的元素。
Example:
$('#content:visible').css('color', '#EEE');
在http://api.jquery.com/category/selectors/visibility-filter-selectors/
了解详情
使用is()过滤
Example:
$('#content').is(":visible").css('color', '#EEE');
Or checking condition
if ($('#content').is(":visible")) {
// Perform action
}
了解详情
答案 34 :(得分：15)
只需检查该元素是否可见并且它将返回布尔，jQuery通过向元素添加display none来隐藏元素，因此如果您要使用纯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
};
在jQuery中使用css方法也会产生同样的结果：
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
}
答案 35 :(得分：15)
作为hide()，show()和toggle()将内联css（display：none或display：block）附加到元素。
类似地，我们可以通过检查显示CSS来轻松使用三元运算符来检查元素是隐藏还是可见。
<强>更新
因此，我们可以检查使其不可见的元素的属性。因此，它们是display: none和visibility: "hidden";
我们可以创建一个对象来检查负责隐藏元素的属性：
var hiddenCssProps = {
display: "none",
visibility: "hidden"
}
如果key的element属性与hidden属性值匹配，我们可以通过循环遍历对象匹配中的每个键值来检查。
var isHidden = false;
for(key in hiddenCssProps) {
if($('#element').css(key) == hiddenCssProps[key]) {
isHidden = true;
}
}
如果要检查元素高度：0或宽度：0或更高的属性，可以扩展此对象并向其添加更多属性并进行检查。
谢谢@Krzysztof Przygoda提醒我其他展示属性。
答案 36 :(得分：15)
这就是helper method在内部解决这个问题的方法：
function isVisible(elem) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
如果您不使用jQuery，您只需利用此代码并将其转换为您自己的函数：
isVisible只要元素可见，true将返回fa-lg。
答案 37 :(得分：14)
您可以使用：
$(element).is(':visible');
$(document).ready(function()
{
$("#toggle").click(function()
{
$("#content").toggle();
});
$("#visiblity").click(function()
{
if( $('#content').is(':visible') )
{
alert("visible"); // Put your code for visibility
}
else
{
alert("hidden");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<p id="content">This is a Content</p>
<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>
答案 38 :(得分：12)
我只是想澄清一下，在jQuery中，
由于以下几个原因，可以将元素视为隐藏：
- CSS显示值为none。
- 它们是type =“hidden”的表单元素。
- 它们的宽度和高度明确设置为0.
- 隐藏了一个祖先元素，因此页面上不会显示该元素。
具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍然占用布局中的空间。在隐藏元素的动画期间，该元素在动画结束前被视为可见。
if($('.element').is(':hidden')) {
// Do something
}
答案 39 :(得分：11)
这是检查标签是否可见的一些选项
// using a pure CSS selector
if ($('p:visible')) {
alert('Paragraphs are visible (checked using a CSS selector) !');
};
// using jQuery's is() method
if ($('p').is(':visible')) {
alert('Paragraphs are visible (checked using is() method)!');
};
// using jQuery's filter() method
if ($('p').filter(':visible')) {
alert('Paragraphs are visible (checked using filter() method)!');
};
// you can use :hidden instead of :visible to reverse the logic and check if an element is hidden
// if ($('p:hidden')) {
// do something
// };
答案 40 :(得分：10)
您可以在可见的时候添加一个类。添加一个类show。然后检查它是否有类：
$('#elementId').hasClass('show');
如果您拥有show类，则返回true。
像这样添加CSS：
.show{ display: block; }
答案 41 :(得分：8)
检查隐藏元素的方法太多了。这是最好的选择（我刚推荐你）：
使用jQuery，在CSS中创建一个元素＆＃34; display：none＆＃34;，隐藏。
重点是：
$('element:visible')
使用示例：
$('element:visible').show();
答案 42 :(得分：6)
只需检查display属性（或visibility，具体取决于您偏好的隐身类型）。示例：
if ($('#invisible').css('display') == 'none') {
// This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
答案 43 :(得分：4)
您可以使用
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
答案 44 :(得分：4)
使用隐藏选择，您可以匹配所有隐藏元素
$('element:hidden')
使用可见选择，您可以匹配所有可见元素
$('element:visible')
答案 45 :(得分：4)
如果该元素不可见，则返回false。
function checkVisible(e) {
if (!(e instanceof Element)) throw Error('not an Element');
const elementStyle = getComputedStyle(e);
if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
e.getBoundingClientRect().width === 0) {
return false;
}
const elemCenter = {
x: e.getBoundingClientRect().left + e.offsetWidth / 2,
y: e.getBoundingClientRect().top + e.offsetHeight / 2
};
if (elemCenter.x < 0 || elemCenter.y < 0) return false;
if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
do {
if (pointContainer === e) return true;
} while (pointContainer = pointContainer.parentNode);
return false;
}
答案 46 :(得分：4)
<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>
$("#myelement div:visible").each( function() {
//Do something
});
这是jQuery实现此功能的方式：
jQuery.expr.filters.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
使用Element.getBoundingClientRect（），您可以轻松检测元素是否在视口的边界内（即屏幕上或屏幕外）：
jQuery.expr.filters.offscreen = function(el) {
var rect = el.getBoundingClientRect();
return (
(rect.x + rect.width) < 0
|| (rect.y + rect.height) < 0
|| (rect.x > window.innerWidth || rect.y > window.innerHeight)
);
};
然后您可以通过多种方式使用它：
// returns all elements that are offscreen
$(':offscreen');
// boolean returned if element is offscreen
$('div').is(':offscreen');
如果使用Angular，请检查：Don’t use hidden attribute with Angular
答案 47 :(得分：3)
if($("h1").is(":hidden")){
// your code..
}
答案 48 :(得分：3)
如果您要检查元素是否在页面上可见（取决于其父元素的可见性），则可以检查元素的from flask_mysqldb import MySQL
File "/Library/Python/2.7/site-packages/flask_mysqldb/__init__.py", line 1, in <module>
import MySQLdb
File "/Library/Python/2.7/site-packages/MySQLdb/__init__.py", line 18, in <module>
import _mysql
ImportError: dlopen(/Library/Python/2.7/site-packages/_mysql.so, 2): Library not loaded: @rpath/libmysqlclient.21.dylib
Referenced from: /Library/Python/2.7/site-packages/_mysql.so
Reason: image not found
和width是否都等于{{1 }}。
jQuery
height
香草
0
或
$element.width() === 0 && $element.height() === 0
答案 49 :(得分：2)
公平地说，这个问题早于这个答案。
我补充说，不是批评OP，而是帮助任何人提出这个问题。
确定某些内容是否可见的正确方法是咨询您的视图模型;
如果您不知道这意味着什么，那么您即将踏上探索之旅，这将使您的工作变得更加困难。
以下是model-view-view-model架构（MVVM）的概述。
KnockoutJS是一个绑定库，可以让你在不学习整个框架的情况下尝试这些东西。
这里有一些可能会或可能不会显示的JS和DIV。
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
//get current visibility state for the div
var x = IsDivVisible();
//set it to the opposite
IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>
请注意，切换函数不会查询DOM以确定div的可见性，它会查看视图模型。
答案 50 :(得分：1)
您可以使用jQuery is()函数来检查所选元素是否可见。此方法遍历DOM元素以找到匹配项，该匹配项满足传递的参数。如果存在匹配项，则返回true，否则返回false。
<script>
($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
答案 51 :(得分：0)
if($(element).is(":visible")) {
console.log('element is visible');
} else {
console.log('element is not visible');
}
答案 52 :(得分：0)
您还可以：
hideShow(){
$("#accordionZiarat").hide();
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
if ($("#accordionZiarat").is(":visible")) {
$("#accordionZiarat").hide();
}
else if ($("#accordionZiarat").is(":hidden")) {
$("#accordionZiarat").show();
}
else{
}
答案 53 :(得分：0)
下面的代码检查元素是否在jQuery中隐藏或可见
//You can also do this...
$("button").click(function(){
// show hide paragraph on button click
$("p").toggle("slow", function(){
// check paragraph once toggle effect is completed
if($("p").is(":visible")){
alert("The paragraph is visible.");
} else{
alert("The paragraph is hidden.");
}
});
});
答案 54 :(得分：0)
尝试
content.style.display != 'none'
function toggle() {
$(content).toggle();
let visible= content.style.display != 'none'
console.log('visible:', visible);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="toggle()">Show/hide</button>
<div id="content">ABC</div>
答案 55 :(得分：0)
jQuery解决方案，一个很老的问题，但是我还是想为那些想要更改按钮文本的人提供更好的答案。
$(function(){
$("#showHide").click(function(){
var btn = $(this);
$("#content").toggle(function () {
btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showHide">Hide</button>
<div id="content">
<h2>Some content</h2>
<p>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
答案 56 :(得分：0)
执行以下操作，而不是为每个event写一个element：
$('div').each(function(){
if($(this).css('display') === 'none'){
$(this).css({'display':'block'});
}
});
您也可以在输入中使用它：
$('input').each(function(){
if($(this).attr('type') === 'hidden'){
$(this).attr('type', 'text');
}
});
答案 57 :(得分：0)
你可以这样做：
isHidden = function(element){
return (element.style.display === "none");
};
if(isHidden($("element")) == true){
// something
}
答案 58 :(得分：0)
通过切换类，可以在css类可见或隐藏时使用它。
.show{ display :block; }
设置您的jQuery toggleClass()或addClass()或removeClass();。
举个例子，
jQuery('#myID').toggleClass('show')
上述代码会在元素没有show时添加show css类，并在show类时删除。
当你检查它是否可见时，你可以按照这个jQuery代码，
jQuery('#myID').hasClass('show');
当#myID元素具有我们的类（show）时，上面的代码将返回一个布尔值（true），如果没有（show）类，则返回false。 / p>
答案 59 :(得分：0)
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')