Question

我正在为特定布局动态生成特定的DOM元素。在某些情况下，我可以使用jQuery获取先前创建的元素的宽度（以确定其他布局因子）。

var width = parseInt((jQuery(element).css("width")));

然而，只有在将元素附加到窗口后才能使用。有没有办法获得生成但尚未附加到窗口的元素的理论宽度？

（额外信息：向下看函数的骨架，我只是用document.createElement()生成这些

Answer 1

这不是很实用或有用，但我刚写了这个函数，它通过克隆父级并将其放在dom屏幕外来创建一个“沙盒”。

var getStyle = function($parent, $element, props){
    if(typeof props == 'string'){props = [props];}
    var $sandbox = $parent.clone().css({
        position: 'absolute',
        display: 'inline-block',
        width: $parent.width(),
        height: $parent.height(),
        top: -1000,
        left: -1000
    });
    $('body').append($sandbox);
    $sandbox.append($element);
    var result = {};
    for(var i=0;i<props.length;i++){
        var p = props[i];
        if(p == 'width'){ result[p] = $element.width(); }
        else if (p == 'height'){ result[p] = $element.height(); }
        else{ result[p] = $element.css(p); }
    }
    $sandbox.remove();
    return result;
}


console.log(
    getStyle(
        $('#name'),                    //parent
        $('<div>helo</div>'),          //new elemen 
        ['width','height','color']     //properties to fetch
    )
);

http://jsfiddle.net/beXyM/1/

使用jQuery获取未使用元素的CSS

1 个答案: