18

FirefoxのquerySelector（）またはquerySelectorAll（）関数で疑似セレクターを使用して可視性を検出する方法はありますか？特に私はこのようなことをしたいと思っています：

elem.querySelector('#list .list-item:visible');
elem.querySelector('#section .sub-section:visible .title');

ブラウザの不整合やその他の実装について心配する必要はありません。Firefoxだけです。ありがとう！

編集：可視性は、表示がなしではなく、可視性が非表示ではないことによって定義されます。

4

6 に答える 6

21

：visible疑似セレクターのネイティブな意味がないため、CSSクラスを使用して要素を表示および非表示にすることにしました。これにより、可視性ではなく、クラス名を確認するだけで済みます。これが私のセレクターが今どのように見えるかです：

elem.querySelector('#list .list-item:not(.hidden)');

2016年には、非表示のhtml5属性も使用できるようになったため、このセレクターも機能します。

elem.querySelector('#list .list-item:not([hidden])');
于 2012-11-14T23:19:15.083 に答える
12

いいえ、ありません。CSS仕様は（または関連する）セレクターを定義しておらず:visible、AFAIKFirefoxは非標準の疑似セレクターを実装していません。

これを自分で実装したい場合は、jQueryが:visibleセレクターを実装する方法に注意してください。

jQuery 1.3.1（およびそれ以前）では、CSSの「display」が「none」でなく、CSSの「visibility」が「hidden」でなく、タイプ（入力の場合）が「hidden」でない場合、要素は表示されていました。 "。jQuery 1.3.2では、ブラウザから報告されたoffsetWidthまたはoffsetHeightが0より大きい場合、要素が表示されます。

ソース：http ：//docs.jquery.com/Release：jQuery_1.3.2＃：visible.2F：hidden_​​Overhauled

于 2012-11-14T22:46:58.040 に答える
11

display:noneと同等のCSSセレクターではない要素を見つけるため:visibleに

:not([style='display:none'])

必要に応じて、セレクターに対して同じことを行ってから、セレクターvisibility:hiddenをチェーンすることができ:not()ます。

これがフィドルです。

編集：スペースやその他の句読点に注意してください。たとえば、後でJQueryやなどを使用してこれらの要素を操作しhide()、同じ関数を呼び出す必要がある場合は:not([style="display: none;"])、CSSセレクターにチェーンする必要があります。

于 2019-01-18T19:07:13.587 に答える
7

プレーンなJavaScriptを使用すると、jQueryの動作を簡単にエミュレートし、querySelectorの結果を配列に変換して、次のようにフィルタリングすることもできます。

Array.prototype.slice.call(document.querySelectorAll('your selector'))

これにより、セレクターの結果を含むプレーン配列が作成され、次のようにフィルター処理できます。

.filter(function (item,index) { return item.style.display!="none" } );

または残りのjquery条件（item.style.visibility != "hidden" && item.style.opacity > 0 && ...）。

ワンライナーとして：

Array.prototype.slice.call(document.querySelectorAll('your selector')).filter(function (item,index) { return item.style.display!="none" } );
于 2017-10-18T10:52:06.313 に答える
2

要素が表示されているかどうかを確認し、すべての主要なブラウザでサポートします。

jQuery：

$('.list-item').is(':visible');

バニラJS：

function isVisible(elem) {return elem.offsetWidth > 0 || elem.offsetHeight > 0 || elem.getClientRects().length > 0; }
于 2016-04-18T17:07:29.413 に答える
0

このoffsetParent値を使用して、要素が表示されているかどうかを判断できます。

let parent = document.getElementById('parent');
let allSubChildren = parent.querySelectorAll('.sub-children');

let visibleChildren = Array.prototype.slice.call(allSubChildren).filter(function (item, index) {
    console.log('Element "' + item.textContent + '" is ' + (item.offsetParent !== null ? 'visible' : 'hidden'));
    return item.offsetParent !== null;
  }
);

console.log(visibleChildren);
.none {
  display: none;
}

.hidden {
  visibility: hidden;
}
<p><b>item.offsetParent</b> returns <b>null</b> if the element or any parent is not displayed.</p>
<em>Check the console</em>

<div id="parent">
  <div class="children">
    <div class="sub-children">visible</div>
  </div>
  <div class="children hidden">
    <div class="sub-children">visibility hidden doesn't work</div>
  </div>
  <div class="children none">
    <div class="sub-children">display none</div>
  </div>
  <div class="children">
    <div class="sub-children">also visible</div>
  </div>
  <div class="children">
    <div class="sub-children none">also display none</div>
  </div>
</div>

<div id="result">

</div>

于 2020-04-17T07:40:47.943 に答える