13

CSS だけを使用して、表示される要素のスタイルを変更したい。それを行うセレクターはありますか？Chrome と Firefox でのみ動作する必要があります。(拡張機能・アドオンを作成中です)

そうでない場合、軽い JavaScript で可視要素のスタイルを変更する方法はありますか?

現在のスクロール位置内に表示されます。要素がスクロール ビジョンの外にある場合や、部分的に表示されている場合があります。

4

4 に答える 4

7

可視性を評価するための標準的な純粋な CSS ルールはありません。

他の人が言ったように、jQuery (jQuery を使用したい場合) には、CSS セレクター拡張機能 :visibleと、任意の jQuery オブジェクトで実行して、または.is(':visible')を使用して任意の DOM 要素で計算されたスタイルを取得する機能の両方があります。.css("display").css("visibility")

単純な JavaScript では、オブジェクトが表示されているかどうかを判断するのは特に単純ではありません。これは、computedStyle を取得する必要があり (要素に影響を与える可能性のあるすべての可能な CSS ルールを考慮するため)、親オブジェクトが非表示になっていないことを確認する必要があるためです。非表示にする子要素。これは、私自身の個人ライブラリにある関数です。

//----------------------------------------------------------------------------------------------------------------------------------
// JF.isVisible function
//
// Determines if the passed in object is visible (not visibility:hidden, not display: none 
// and all parents are visible too.
//
// Source: http://snipplr.com/view/7215/javascript-dom-element-visibility-checker/
//----------------------------------------------------------------------------------------------------------------------------------
JF.isVisible = function(obj)
{
    var style;

    if (obj == document) return true;

    if (!obj) return false;
    if (!obj.parentNode) return false;
    if (obj.style) {
        if (obj.style.display == 'none') return false;
        if (obj.style.visibility == 'hidden') return false;
    }

    //Try the computed style in a standard way
    if (window.getComputedStyle) {
        style = window.getComputedStyle(obj, "")
        if (style.display == 'none') return false;
        if (style.visibility == 'hidden') return false;
    } else {
        //Or get the computed style using IE's silly proprietary way
        style = obj.currentStyle;
        if (style) {
            if (style['display'] == 'none') return false;
            if (style['visibility'] == 'hidden') return false;
       }
    }

    return JF.isVisible(obj.parentNode);
};
于 2012-04-17T02:04:51.810 に答える
1

純粋な CSS を使用して非表示の要素を選択する方法はありません

http://www.w3.org/TR/selectors/

ただし、クラス名またはその他のセレクターがある場合、jquery を使用すると、次のようなことができます。

jQuery(selector).each(function(){
    Var $this=$(this);
    if ($this.css('visibility')==='hidden')
       //set your style
})

編集: 編集後、CSS だけでビューポート内にあるものを選択する方法は絶対にありません。それは一種の文脈自由言語です。

ただし、jquery を使用して要素のオフセット位置をいじり、現在のビューポート (window.scrollposition など) 内にあるかどうかを判断することはいつでもできます。ただし、このタイプのソリューションはすぐに面倒になります。

于 2012-04-17T02:02:08.137 に答える
1

これを行うための純粋な CSS の方法はありません。Kirean のコメントが既に述べたように、なぜ目に見える要素だけをスタイルしたいのでしょうか? とにかく、目に見えない要素はスタイルを表示しません。非表示の要素がスペースを占有したくない場合 (別名、レイアウトされた場合)、使用する必要があります。display: none;

セレクターで表示可能な要素を選択することが本当に必要な場合は、Widor が提案したことを実行して jQuery を使用できます。最初に jQuery を使用して、最初に表示される要素を選択し、それらにクラスを追加してから、CSS を使用してそのクラスで要素を選択できます。

$('div:visible').addClass('visibleElement');


.visibleElement {
  color: red;
}
于 2012-04-17T02:07:28.903 に答える
1

:visibleこれは私にはセレクター のように見えます: http://api.jquery.com/visible-selector/

編集：javascript「CSSなし」の警告の前にタグを見ました。

しかし、これは一種の CSS セレクターです。

于 2012-04-17T02:00:10.080 に答える