要素がjQueryで非表示になっているかどうかを確認する方法
関数.hide()、.show()または.toggle()を使って、要素の可視性を切り替えることができます。
要素が表示されているか隠されているかどうかをどのようにテストしますか？
質問は単一の要素を参照しているので、このコードはより適しているかもしれません。
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
twerntの提案 と同じですが、単一の要素に適用されます。 jQueryで推奨されているアルゴリズムに一致しますFAQ
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が見えるかどうかを調べる必要があるとき、上記は多くの場合に役に立ちます。
これらの答えのどれも、私が質問として理解しているもの、つまり私が探していたものに対処していません"visibility: hidden？"を持つアイテムをどのように処理しますか。 :visibleも:hiddenも、ドキュメントごとに表示を探しているため、これを処理しません。私が判断できる限り、CSSの可視性を処理するセレクタはありません。ここに私がそれを解決した方法があります（標準jQueryセレクター、より凝縮された構文があるかもしれません）：
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
:visibleおよび:hiddenセレクタを使用して、要素が折りたたまれているかどうかを判断できます。
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
単に可視性に基づいて要素を操作しているのであれば、セレクタ式に:visibleまたは:hiddenを含めることができます。例えば：
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
何かが見えているかどうかをチェックするとき、あなたはすぐにすぐに行き、それを使って何か他のことをするでしょう。 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" });
jQueryのドキュメント に従った:visibleセレクター
- それらはCSSの
display値がnoneです。- それらは
type="hidden"を持つフォーム要素です。- 幅と高さは明示的に0に設定されています。
- 先祖要素は非表示になっているため、その要素はページに表示されません。
visibility: hiddenまたはopacity: 0を持つ要素は、レイアウト内のスペースを消費するため、表示されていると見なされます。
これは、親の可視性を無視して要素が可視かどうか（display != none）を確認したい場合、.css("display") == 'none'を実行する方が速いだけでなく、可視性チェックも正しく返されることがわかります。 。
表示ではなく可視性をチェックしたい場合は、.css("visibility") == "hidden"を使用してください。
追加のjQueryノート も考慮に入れてください。
:visibleはjQueryの拡張機能でありCSS仕様の一部ではないため、:visibleを使用するクエリではネイティブDOMのquerySelectorAll()メソッドによるパフォーマンス向上を活用することはできません。:visibleを使用して要素を選択するときに最高のパフォーマンスを達成するには、最初に純粋なCSSセレクタを使用して要素を選択し、次に.filter(":visible")を使用します。
また、パフォーマンスが気になる場合は、現在表示されているパフォーマンスの表示/非表示（2010-05-04）を確認してください。他の方法を使用して要素を表示および非表示にします。
これは私のために働きます、そして私は私のdivを隠し/見えるようにするためにshow()とhide()を使っています：
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
要素は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(); });
私はCSSクラス.hide { display: none!important; }を使います。
隠したり見せたりするために、.addClass("hide")/.removeClass("hide")と呼びます。可視性をチェックするために、私は.hasClass("hide")を使います。
.toggle()や.animate()メソッドを使うつもりがなければ、要素をチェック/非表示/表示するためのシンプルで明確な方法です。
普通の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とインラインスタイルに対応
フレームワークを必要としません
次のように単純にhiddenまたはvisible属性を使うことができます。
$('element:hidden')
$('element:visible')
あるいは次のように is で同じことを単純化することができます。
$(element).is(":visible")
$('#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="" />出典：
Blogger Plug n Play - jQueryツールとウィジェット：jQueryを使用して要素が非表示になっているか表示されているかを確認する方法
ebdivはstyle="display:none;"に設定する必要があります。表示と非表示の両方に機能します。
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
JQueryで:hiddenセレクターに対して要素をテストするときは、 子要素は表示されているが絶対位置指定された要素は非表示として認識される可能性があることを考慮する必要があります 。
これは最初はやや直観的ではないように思われます - jQueryのドキュメントを詳しく見ると関連情報が得られます。
要素はいくつかの理由で非表示と見なすことができます。[...]それらの幅と高さは明示的に0に設定されています。[...]
そのため、これは実際にはボックスモデルと要素の計算スタイルに関して意味があります。 widthとheightが明示的にに設定されていなくても、それらは暗黙的にに設定されるかもしれません。
次の例を見てください。
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では、説明されている動作が変わります。幅や高さがゼロのレイアウトボックスを含むレイアウトボックスがある場合、その要素は表示されていると見なされます。
JQuery 3.0.0-alpha1によるJSFiddle：
同じJSはこのように出力します：
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
これはうまくいくでしょう：
expect($("#message_div").css("display")).toBe("none");
例：
$(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>見えないかどうかを確認するには、!を使用します。
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
あるいは、以下もsamであり、jQueryセレクターを変数に保存して、必要に応じてパフォーマンスを向上させることができます。
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
スタイルの編集ではなく、クラスの切り替えを使用してください。 。 。
要素を「隠す」ために指定されたクラスを使用するのは簡単で、最も効率的な方法の1つでもあります。 Displayスタイルの 'none'でクラス 'hidden'を切り替えると、そのスタイルを直接編集するよりも速くなります。私は、スタックオーバーフローの質問2つの要素を同じdivに表示/非表示にするで、かなり徹底的に説明しました。
JavaScriptのベストプラクティスと最適化
これはGoogleのフロントエンドエンジニアNicholas ZakasによるGoogle Tech Talkの本当に啓発的なビデオです。
- JavaScriptを高速化する（YouTube）
visible adblockerのチェックを使用した例が有効になっています。
$(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がオンになっているかどうかを検出できます。
結局のところ、例のどれも私に合っていないので、私は私自身のものを書きました。
テスト （Internet Explorerのサポートなしfilter:alpha）：
a）文書が隠されていないか確認する
b）要素の幅/高さ/不透明度がゼロか、インラインスタイルのdisplay:none/visibility:hiddenかを確認します。
c）要素の中心が（すべてのピクセル/コーナーをテストするよりも速いので）他の要素（およびすべての先祖、例：overflow:hidden/scroll/one element over enother）または画面の端に隠れていないかどうかをチェック
d）要素の幅/高さ/不透明度が0か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ドキュメントモード+インターネット）仮想マシン上の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
あなたは両方をチェックする必要があります...表示だけでなく可視性：
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
$(this).is(":visible")をチェックすると、jQueryは両方のことを自動的にチェックします。
たぶん、あなたはこのようなことをすることができます
$(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>Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout（ jQuery：visible Selector について説明したように） - elementが 本当に visibleであるかどうかをチェックすることができます。
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;
}
});
次のように、ブール値をチェックして可視性をチェックするだけです。
if (this.hidden === false) {
// Your code
}
私はそれぞれの機能にこのコードを使いました。そうでなければ、要素の可視性をチェックするためにis(':visible')を使うことができます。
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
しかし、要素のCSSが次のようになったらどうでしょうか。
.element{
position: absolute;left:-9999;
}
だから スタックオーバーフローの質問に対するこの答え 要素が画面外にあるかどうかをチェックする方法 も考慮すべきです。
要素の状態をチェックしてそれを切り替える三項条件式もあります。
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
要素がUIに表示されるかどうかを判断するために、表示/表示属性を確認するための関数を作成できます。
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
.is(":not(':hidden')") /*if shown*/
私はこれを検索しましたが、答えがどれも私の場合には正しくないので、私は自分の目が要素を見ることができない場合に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;
}
}
});
if($('#id_element').is(":visible")){
alert('shown');
}else{
alert('hidden');
}
これが jQuery がこの問題を内部的に解決する方法です。
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
JQueryを使用しない場合は、このコードを利用して独自の関数に変えることができます。
function isVisible(elem) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
要素が可視である限り、どのisVisibleはtrueを返します。
その要素が visible であるかどうかをチェックするだけで、 boolean が返されます。要素にdisplay noneを追加することでjQueryは要素を非表示にします。例えば：
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
}
要素が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
}
詳しくは http://api.jquery.com/is/ をご覧ください。
hide()、show()およびtoggle()はインラインcss（display：noneまたはdisplay：block）をelementにアタッチするので、同様に、display cssをチェックすることで三項演算子を使って気象要素が隠されているかどうかを確認できます。
更新：
- 要素cssがvisibility： "visible"またはvisibility： "hidden"に設定されているかどうかも確認する必要があります。
- Displayプロパティがinline-block、block、flexに設定されている場合、要素も表示されます。
それで、それを見えなくする要素の特性をチェックすることができます。だから彼らはdisplay: noneとvisibility: "hidden";です
要素を隠す原因となるプロパティをチェックするためのオブジェクトを作成することができます。
var hiddenCssProps = {
display: "none",
visibility: "hidden"
}
キーの要素プロパティが隠しプロパティ値と一致する場合、オブジェクトマッチングで各キー値をループ処理することで確認できます。
var isHidden = false;
for(key in hiddenCssProps) {
if($('#element').css(key) == hiddenCssProps[key]) {
isHidden = true;
}
}
要素の高さ：0や幅：0以上のようなプロパティをチェックしたい場合は、このオブジェクトを拡張してさらにプロパティを追加してチェックすることができます。
他のディスプレイのプロパティを思い出させてくれてありがとう@Krzysztof Przygoda。
これを使うことができます：
$(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>これはタグが見えるかどうかを確認するためのオプションです。
// 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
// }; 私はjQueryの中で、それを明確にしたいだけです。
要素はいくつかの理由で非表示と見なすことができます。
- それらはnoneのCSS表示値を持ちます。
- これらはtype = "hidden"のフォーム要素です。
- 幅と高さは明示的に0に設定されています。
- 先祖要素は非表示になっているため、その要素はページに表示されません。
可視性：非表示または不透明度：0の要素は、レイアウト内のスペースを消費するため表示されていると見なされます。要素を非表示にするアニメーションの間、その要素はアニメーションの最後まで表示されていると見なされます。
if($('.element').is(':hidden')) {
// Do something
}
表示されたときにクラスを追加するだけです。クラスshowを追加します。それからそれがクラスを持っていることを確認します。
$('#elementId').hasClass('show');
showクラスがある場合はtrueを返します。
次のようにCSSを追加してください。
.show{ display: block; }
隠し要素をチェックする方法が多すぎます。これが最良の選択です（私はちょうどあなたをお勧めします）：
JQueryを使用して、CSSで非表示の要素「display：none」を作成します。
ポイントは：
$('element:visible')
そして使用例：
$('element:visible').show();
単にdisplay属性（またはあなたがどの種類の不可視性を好むかに応じてvisibility）をチェックするだけです。例：
if ($('#invisible').css('display') == 'none') {
// This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
あなたが使用することができます
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
APIドキュメント： https://api.jquery.com/visible-selector/ /
1•jQueryソリューション
要素がJQueryに表示されるかどうかを決定するメソッド
<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>
Id 'myelement'の要素のすべての visible divの子をループします。
$("#myelement div:visible").each( function() {
//Do something
});
JQueryのソースを覗いた
これがjQueryがこの機能を実装する方法です。
jQuery.expr.filters.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
2• エレメントが画面外にあるかどうかを調べる方法 - CSS
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を使用している場合は、 Angularではhidden属性を使用しないでください を確認してください。
if($("h1").is(":hidden")){
// your code..
}
場合によっては、要素がページに表示されているかどうかを確認したい場合は、その親の表示状態によっては、widthとheightが両方とも0と等しいかどうかを確認できます。
jQuery
$element.width() === 0 && $element.height() === 0
バニラ
element.clientWidth === 0 && element.clientHeight === 0
または
element.offsetWidth === 0 && element.offsetHeight === 0
JQuery is()関数を使用して、選択した要素の表示または非表示を確認できます。このメソッドは、DOM要素に沿ってトラバースし、渡されたパラメーターを満たす一致を見つけます。一致する場合はtrueを返し、そうでない場合はfalseを返します。
<script>
($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
表示または非表示になっている場合は、クラスを切り替えることで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を返します。
すべての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');
}
});
試して
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>あなたはこれを行うことができます：
isHidden = function(element){
return (element.style.display === "none");
};
if(isHidden($("element")) == true){
// something
}
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>$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
公平を期すために、この答えよりも前の質問です。私は、OPを批判するのではなく、まだこの質問をしている人を助けるためにそれを付け加えます。
何かが見えているかどうかを判断する正しい方法は、あなたのビューモデルを調べることです。それが何を意味するのかわからなければ、あなたはあなたの仕事をそれほど難しくしないようにする発見の旅に着手しようとしています。
これが model-view-viewmodel architecture（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>
Toggle関数はdivの可視性を判断するためにDOMを調べないで、view-modelを調べることに注意してください。