if ($("#makespan").is(":visible") == true) {
var make = $("#make").val();
}
else {
var make = $("#othermake").val();
}
Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake> - <span id=othermakecancel class=txtbutton>Cancel</span></span>
以上代码在Firefox中运行顺畅，但似乎无法在Chrome中运行。在Chrome中，即使是.is(":visible") = false，也会显示true。
我正在使用以下jQuery版本：jquery-1.4.3.min.js
jsFiddle链接：http://jsfiddle.net/WJU2r/4/
答案 0 :(得分：266)
似乎jQuery的:visible选择器不适用于Chrome中的某些内联元素。解决方案是添加显示样式，例如"block"或"inline-block"，以使其有效。
另请注意，与许多开发人员相比，jQuery对可见内容的定义有所不同：
如果元素占用文档中的空间，则认为元素可见。
可见元素的宽度或高度大于零。
换句话说，元素必须具有非零宽度和高度才能占用空间并且可见。
visibility: hidden或opacity: 0的元素被视为可见， 因为他们仍然在布局中消耗空间。
另一方面，即使其visibility设置为hidden或不透明度为零，它仍然是jQuery的:visible，因为它占用空间，这可能会让人感到困惑CSS明确表示隐藏了它的可见性。
文档中没有的元素被视为隐藏; jQuery呢 无法知道附加到a时是否可见 文件，因为它取决于适用的风格。
所有选项元素都被视为隐藏，无论它们是什么 选定的州。
在隐藏元素的动画期间，会考虑该元素 直到动画结束时才可见。在动画期间展示一个 元素，元素在开始时被认为是可见的 动画。
查看它的简单方法是，如果您可以在屏幕上看到该元素，即使您看不到它的内容，它也是透明的等等，它是可见的，即占用空间。
我稍微清理了你的标记并添加了显示样式（即将元素显示设置为“阻止”等），这对我有用：
Official API reference for :visible
从jQuery 3开始，:visible的定义略有改变
jQuery 3稍微修改了
:visible的含义（因此也是如此）:hidden）。
从这个版本开始，将考虑元素:visible如果他们有任何布局框，包括零宽度的布局框 和/或高度。例如，br元素和内联元素没有 内容将由:visible选择器选择。
答案 1 :(得分：60)
我不知道为什么你的代码不能用于chrome，但我建议你使用一些解决方法：
$el.is(':visible') === $el.is(':not(:hidden)');
或
$el.is(':visible') === !$el.is(':hidden');
如果你确定jQuery在chrome中给你一些不好的结果，你可以依靠css规则检查：
if($el.css('display') !== 'none') {
// i'm visible
}
另外，您可能希望使用latest jQuery，因为它可能会修复旧版本的错误。
答案 2 :(得分：8)
我认为它与我们HTML中的怪癖有关，因为同一页面上的其他地方工作得很好。
我能够解决这个问题的唯一方法是：
if($('#element_id').css('display') == 'none')
{
// Take element is hidden action
}
else
{
// Take element is visible action
}
答案 3 :(得分：8)
有一种奇怪的情况，如果元素设置为display: inline，则jQuery检查可见性失败。
示例：
<强> CSS
#myspan {display: inline;}
<强>的jQuery
$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false
要修复它，你可以在jQuery中隐藏元素，而show/hide或toggle()应该可以正常工作。
$('#myspan').hide()
$('#otherElement').on('click', function() {
$('#myspan').toggle();
});
答案 4 :(得分：7)
如果您阅读了jquery文档，有很多原因可以将某些内容视为不可见/隐藏：
他们的CSS显示值为none。
它们是type =“hidden”的表单元素。
它们的宽度和高度显式设置为0.
隐藏了一个祖先元素，因此该元素不会显示在页面上。
http://api.jquery.com/visible-selector/
这是一个小的jsfiddle示例，其中包含一个可见元素和一个隐藏元素：
答案 5 :(得分：7)
Internet Explorer，Chrome，Firefox ......
跨浏览器功能“isVisible（）”
//check if exist and is visible
function isVisible(id) {
var element = $('#' + id);
if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
return true;
} else {
return false;
}
}
完整示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
//check if exist and is visible
function isVisible(id) {
var element = $('#' + id);
if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
return true;
} else {
return false;
}
}
function check(id) {
if (isVisible(id)) {
alert('visible: true');
} else {
alert('visible: false');
}
return false;
}
</script>
<style type="text/css">
#fullname{
display: none;
}
#vote{
visibility: hidden;
}
</style>
<title>Full example: isVisible function</title>
</head>
<body>
<div id="hello-world">
Hello World!
</div>
<div id="fullname">
Fernando Mosquera Catarecha
</div>
<div id="vote">
rate it!
</div>
<a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
<a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
<a href="#" onclick="check('vote');">Check isVisible('vote')</a>
</body>
</html>
此致
费尔南多
答案 6 :(得分：3)
一般情况下，当我的对象的父级被隐藏时，我会遇到这种情况。 例如，当html是这样的时候：
<div class="div-parent" style="display:none">
<div class="div-child" style="display:block">
</div>
</div>
如果你问孩子是否可见，如：
$(".div-child").is(":visible");
它将返回false，因为它的父元素不可见，因此div也不可见。
答案 7 :(得分：3)
确定元素是否可见的跨浏览器/版本解决方案是向show / hide上的元素添加/删除css类。元素的默认（可见）状态可以是这样的：
<span id="span1" class="visible">Span text</span>
然后在隐藏中删除课程：
$("#span1").removeClass("visible").hide();
在节目中，再次添加：
$("#span1").addClass("visible").show();
然后确定元素是否可见，请使用：
if ($("#span1").hasClass("visible")) { // do something }
这也解决了性能影响，这可能会在大量使用＆＃34;：visible＆＃34;选择器，在jQuery的文档中指出：
大量使用此选择器可能会影响性能，因为它可能会强制浏览器在确定可见性之前重新呈现页面。例如，使用类跟踪其他方法的元素可见性可以提供更好的性能。
答案 8 :(得分：1)
我在父级添加了下一个样式，而.is（“：visible”）工作了。
display：inline-block;
答案 9 :(得分：0)
如果项目是隐藏项目的子项（“：visible”）将返回true，这是不正确的。
我刚刚通过将“display：inherit”添加到子项来修复此问题。这将为我修好：
<div class="parent">
<div class="child">
</div>
<div>
和CSS：
.parent{
display: hidden;
}
.child{
display: inherit;
}
现在可以通过更改父项的可见性来有效地打开和关闭项目，$（element）.is（“：visible”）将返回父项的可见性
答案 10 :(得分：0)
这是来自jquery.js的一段代码，它在调用is（＆＃34 ;:visible＆＃34;）时执行：
if (jQuery.expr && jQuery.expr.filters){
jQuery.expr.filters.hidden = function( elem ) {
return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
}
如您所见，它不仅仅使用CSS显示属性。它还取决于元素内容的宽度和高度。因此，请确保元素具有一定的宽度和高度。为此，您可能需要将显示属性设置为"inline-block"或"block"
答案 11 :(得分：0)
我需要使用可见性：隐藏的显示：无，因为可见性需要事件，而显示没有。
所以我做.attr('visibility') === "visible"