javascript - 获取由 css column-width 创建的列数

Question

可能重复：
如何在 Javascript 中获取 css3 多列计数

我有一个很长的动态文本，将使用 CSS 将其拆分为列

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

是否可以获得创建了多少列？我在客户端使用 jQuery。

Answer 1

您的问题和小提琴忽略了供应商前缀；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;
}

Answer 2

如果列在不同的元素中，您可以使用 $(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);