関数を使用して、要素の可視性をトグルすることが可能である.hide()
、.show()
または.toggle()
?
要素がであるvisible
かどうかをどのようにテストしますかhidden
?
関数を使用して、要素の可視性をトグルすることが可能である.hide()
、.show()
または.toggle()
?
要素がであるvisible
かどうかをどのようにテストしますかhidden
?
回答:
質問は単一の要素を参照しているため、次のコードの方が適している場合があります。
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
これはtwerntの提案と同じですが、単一の要素に適用されます。また、jQuery FAQで推奨されているアルゴリズムと一致します。
jQueryのis()を使用して、選択した要素を別の要素、セレクター、または任意のjQueryオブジェクトでチェックします。このメソッドは、DOM要素に沿ってトラバースして、渡されたパラメーターを満たす一致を見つけます。一致する場合はtrueを返し、それ以外の場合はfalseを返します。
visible=false
としますdisplay:none
。一方、Moteのソリューションは、コーダーがをチェックする意図を明らかに示していdisplay:none
ます。(非表示および表示を制御の言及を介してdisplay:none
ではないvisible=true
)
:visible
、chiborgが指摘したように、親要素が表示されているかどうかもチェックします。
display
プロパティのみをチェックすることを明確にします。元の質問がshow()
and hide()
であり、設定されていることを考えるとdisplay
、私の答えは正しいです。ちなみに、IE7でも動作します。テストスニペットはjsfiddle.net/MWZssです。
hidden
セレクターを使用できます。
// Matches all elements that are hidden
$('element:hidden')
そしてvisible
セレクター:
// Matches all elements that are visible
$('element:visible')
type="hidden"
:hiddenをトリガーできる1つのケースにすぎません。高さと幅のない要素、のある要素display: none
、および祖先が非表示の要素も、:hiddenと見なされます。
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
はないと見なします。ただし、上記は多くの場合に役立ちます。特に、非表示の親にエラーdivが表示されているかどうかを確認する必要がある場合は、このような条件で:visible
は機能しないためです。
hide()
、show()
とtoggle()
関数を使用することですが、ほとんどの人がすでに述べたように、:visible
と:hidden
擬似クラスを使用する必要があります。
これらの回答はどれも、私が質問であると理解していること、つまり「私が持っているアイテムをどのように処理するのvisibility: hidden
ですか?」。どちら:visible
も:hidden
ドキュメントごとに表示を探しているため、これも処理しません。私が判断できる限り、CSSの可視性を処理するセレクターはありません。これが私がそれをどのように解決したかです(標準のjQueryセレクター、より凝縮された構文があるかもしれません):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
visibility
文字通り処理するのに適していますが、問題はでしたHow you would test if an element has been hidden or shown using jQuery?
。jQueryを使用すると、display
プロパティになります。
visibility: hidden
またはのopacity: 0
ある要素は、レイアウト内のスペースをまだ消費しているため、表示されていると見なされます。セレクタに関するPedro Rainhoの回答とjQueryのドキュメントをご覧ください:visible
。
:visible
および:hidden
セレクターを使用して、要素が折りたたまれているかどうかを判別できます。
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
単にその可視性に基づいて要素を操作している:visible
場合:hidden
は、セレクター式に含めるか、セレクター式に含めることができます。例えば:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
top:-1000px
ます...エッジケースだと思います
多くの場合、何かが表示されているかどうかを確認する場合、すぐに先に進み、それを使用して何かを行います。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
}
すべてを1行で行うことができます。
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
:visible
セレクタjQueryのドキュメント:
- 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")
。
また、パフォーマンスが気になる場合は、Now you see me…show / hide performance(2010-05-04)を確認してください。そして、他の方法を使用して要素を表示および非表示にします。
要素は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();
});
visibility:hidden
とは、opacity:0
要素がまだで(クリックなど)イベントに応答するということですopacity:0
。ファイルをアップロードするためのカスタムボタンを作成するトリックを学びました。
プレーンな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とインラインスタイルに対応
フレームワークを必要としません
visibility: hidden
あることを目に見えます。
CSSクラスを使用します.hide { display: none!important; }
。
非表示/表示するには、を呼び出します.addClass("hide")/.removeClass("hide")
。可視性のチェックにはを使用します.hasClass("hide")
。
.toggle()
または.animate()
メソッドを使用する予定がない場合は、要素をチェック/非表示/表示するためのシンプルで明確な方法です。
.hasClass('hide')
親の祖先が非表示になっているかどうかはチェックしません(これにより、親も非表示になります)。ifをチェックすることでこれを正しく機能させることができますが.closest('.hide').length > 0
、なぜホイールを再発明するのですか?
$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>
ソース:
Bloggerプラグアンドプレイ-jQueryツールとウィジェット:jQueryを使用して要素が非表示または表示されているかどうかを確認する方法
:hidden
jQuery でセレクターに対して要素をテストする場合、子要素は表示されますが、絶対配置要素が非表示として認識される場合があることを考慮してください。
これはそもそも直観に反しているように見えますが、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では、説明されている動作が変わります!要素は、幅や高さがゼロなどのレイアウトボックスがある場合、表示されていると見なされます。
jQuery 3.0.0-alpha1を使用するJSFiddle1:
同じJavaScriptコードはこの出力を持ちます:
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
「なし」のスタイルで「非表示」のクラスを切り替えると、そのスタイルを直接編集するよりも速く実行されます。Stack Overflowの質問2つの要素を同じdivで表示/非表示にすることで、このいくつかをかなり徹底的に説明しました。
これは、GoogleのフロントエンドエンジニアであるニコラスザカスによるGoogle Tech Talkの真に啓発的なビデオです。
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
/スクロール/別の要素の上にスクロール)または画面の端に隠れていないかどうかを確認します。
d)要素の幅/高さ/不透明度またはdisplay:none
可視性がゼロであるかどうかを確認します(すべての祖先の中で)計算されたスタイルで非表示になっています
テスト済み
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 on a仮想マシン)、および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:目に見えるセレクター) -要素である場合、我々は確認することができ、本当にこのように見えます:
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;
}
});
しかし、要素のCSSが次のような場合はどうでしょうか。
.element{
position: absolute;left:-9999;
}
したがって、スタックオーバーフローの質問に対するこの回答は、要素が画面外にあるかどうかを確認する方法も考慮する必要があります。
$(element).is(":visible")
jQuery 1.4.4では機能しますが、Internet&nbsp; Explorer&nbsp; 8では jQuery 1.3.2では機能しません。これは、Tsvetomir Tsonevの役立つテストスニペットを使用してテストできます。jQueryのバージョンを変更して、それぞれでテストすることを忘れないでください。