获取由 css column-width 创建的列数[重复]

可能的重复：
如何在 Javascript 中获取 css3 多列计数 https://stackoverflow.com/questions/6989306/how-to-get-css3-multi-column-count-in-javascript

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

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

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

您的问题和小提琴会忽略供应商前缀；拉辛的回答是一个很好的方向，但并不完整。

我为您创建了一个小辅助函数，它会遍历这些值当前实现的前缀，并使用以下命令获取实际值.css()并返回正确的数字。跨浏览器工作，包括始终返回 1 的不支持的浏览器。

我选择忽略 iframe 情况，这只会让事情变得更加复杂，但据我所知与您的​​问题没有直接关系。

Update:现在考虑边框和填充。

jsFiddle 上的代码 http://jsfiddle.net/Ronny/BXaCs/和这里：

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;
}