8

重複の可能性：
Javascriptでcss3の複数列数を取得する方法

CSSを使用して列に分割される長い動的テキストがあります

div
{
    -moz-column-width: 500px;
    -moz-column-gap: 20px;
}

作成された列の数を取得することは可能ですか？クライアント側でjQueryを使用しています。

4

2 に答える 2

8

あなたの質問とフィドルはベンダープレフィックスを無視します。larssinの答えは良い方向ですが、完全ではありません。

私はあなたのために小さなヘルパー関数を作成しました。これは、これらの値に対して現在実装されているプレフィックスを調べ、実際の値をフェッチし.css()て正しい数値を返します。常に1を返すサポートされていないブラウザを含むクロスブラウザで動作します。

私はiframeのケースを無視することにしました。これは物事をより複雑にするだけですが、私が理解しているように、あなたの質問に直接関係していません。

更新：境界線とパディングを考慮します。

jsFiddleとここのコード：

function getColumnsNumber(el){
    var $el = $(el),
        width = $el.innerWidth(),
        paddingLeft, paddingRight, columnWidth, columnGap, columnsNumber;

    paddingLeft = parseInt( $el.css('padding-left'), 10 );
    paddingRight = parseInt( $el.css('padding-right'), 10 );

    $.each(['-webkit-','-moz-',''], function(i, prefix){
        var _width = parseInt( $el.css(prefix+'column-width'), 10 );
        var _gap =   parseInt( $el.css(prefix+'column-gap'), 10 );
        if (!isNaN(_width)) columnWidth = _width;
        if (!isNaN(_gap))   columnGap = _gap;
    });

    columnsNumber = Math.floor( (width - paddingLeft - paddingRight) / (columnWidth + columnGap) );
    if (isNaN(columnsNumber) || columnsNumber < 1) columnsNumber = 1;
    return columnsNumber;
}
于 2012-04-24T18:22:43.697 に答える
0

列が異なる要素にある場合は、$（selector）.length（http://api.jquery.com/length/）で子の数を取得できます。私があなたの問題を正しく理解しているかどうかはわかりませんが、それが役立つことを願っています。

例：

<div id="myText">
    <div class="column">some text...</div>
    <div class="column">some text...</div>
    <div class="column">some text...</div>
</div>

var columns = $('#myText').length;
    /* or */
var columns = $('.column').length;

アップデート：

わかりました。jsfiddleの例を見て、$（'＃test'）。width（）を使用してiframeの結果の幅を取得し、列数を計算できると思いました。

var width = $('#test').width();
var columns = width/(columnWidth+columnsGap);
于 2012-04-23T11:57:10.503 に答える