19

jQueryを使用して要素が通常のフローにあるかどうかを確認する最もエレガントな方法は何ですか?

CSS3仕様によると、

次の場合、ボックスはフローに属します。

その 'display' の使用値は 'block'、'list-item'、'table' またはtemplateです。

その「float」の使用値は「none」です。

その「位置」の使用値は「静的」または「相対」です。

これは、フロー ルートの子か、フローに属するボックスの子のいずれかです。

これらの条件をすべて確認する必要がありますか、それとももっと良い方法がありますか?

4

3 に答える 3

4

より良い方法があるとは思えませんが、別の方法は次のようになります。

1）要素をラッパーで囲みます

2）ラッパーの高さと幅をラップされた要素と比較します

例えば：

$('#elementToTest').clone().addClass('clone').wrap('<div></div>')
if($('#elementToTest.clone').height()>$('#elementToTest.clone').parent().height()){
    //outside the normal flow
}
于 2012-12-11T21:20:03.760 に答える
3

overflow別の「フロー中」の要件は、に設定されていることだと思いますvisible。

CSS2仕様から：

フロート、絶対配置要素、ブロック ボックスではないブロック コンテナ (インライン ブロック、テーブル セル、テーブル キャプションなど)、および「可視」以外の「オーバーフロー」を持つブロック ボックス (その値が伝播された場合を除く)ビューポートに) コンテンツの新しいブロック フォーマット コンテキストを確立します。

あなたが引用した要件と要件に基づいてoverflow、これはjqueryでそれを行う1つの方法です：

function isInFlow(elm, ctxRoot) {

    ctxRoot = ctxRoot || document.body;

    var $elm = $(elm),
        ch = -1,
        h;

    if (!$elm.length) {
        return false;
    }

    while ($elm[0] !== document.body) {
        h = $elm.height();
        if (h < ch || !okProps($elm)) {
            return false;
        }
        ch = h;
        $elm = $elm.parent();

        if (!$elm.length) {
            // not attached to the DOM
            return false;
        }
        if ($elm[0] === ctxRoot) {
            // encountered the ctxRoot and has been
            // inflow the whole time
            return true;
        }
    }
    // should only get here if elm
    // is not a child of ctxRoot
    return false;
}

function okProps($elm) {

    if ($elm.css('float') !== 'none'){
        return false;    
    }
    if ($elm.css('overflow') !== 'visible'){
        return false;    
    }
    switch ($elm.css('position')) {
        case 'static':
        case 'relative':
            break;
        default:
            return false;
    }
    switch ($elm.css('display')) {
        case 'block':
        case 'list-item':
        case 'table':
            return true;
    }
    return false;
}
​

テスト ケースについては、このjsFiddleを参照してください。

使ったほうがいいのかどうかはわかりませwindow.getComputedStyle()ん。

elm関数は、 がのフローまたはブロックの書式設定コンテキストにあるかどうかを確認してctxRootいます (以前に呼び出されたように)。が指定されていない場合ctxRootは、要素に対してチェックしbodyます。ctxRootこれは、流れていることを確認するためのチェックではありません。だから、このHTMLで

<div id="b" style="overflow: hidden;">
    <div id="ba">ba
        <p id="baa">baa</p>
        <span id="bab">bab</span>
        <span id="bac" style="display:block;">bac</span>
    </div>
</div>

テスト ケースは次のとおりです。

var b = $('#b')[0];
console.log('no  ',isInFlow(b));
console.log('no  ',isInFlow('#ba'));
console.log('yes ',isInFlow('#ba', b));
console.log('no  ',isInFlow('#baa'));
console.log('yes ',isInFlow('#baa', b));
console.log('no  ',isInFlow('#bab'));
console.log('no  ',isInFlow('#bab', b));
console.log('no  ',isInFlow('#bac'));
console.log('yes ',isInFlow('#bac', b));
于 2012-12-15T07:56:15.557 に答える
0

さかのぼって調べる代わりに、データ注釈を使用することで、この必要性を先取りすることができます。要素を作成または定義するときはいつでも、その属性data-flowを true または false に設定します。

例えば：

var newDiv = document.createElement("div");
newDiv.style.position = "absolute";
newDiv.setAttribute("data-flow","false");

またはhtmlで

<div style="position:absolute;" data-flow="false"></div>

そして、これらの要素をセレクターで簡単に選択できます。

$('*[data-flow=false]')
于 2012-12-20T10:53:05.130 に答える