使用jQuery獲取未被佔用元素的CSS

我爲特定佈局動態生成特定的DOM元素。在某些情況下，我可以使用jQuery獲取先前創建的元素的寬度（以確定其他佈局因素）。使用jQuery獲取未被佔用元素的CSS

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

然而元素已追加到窗口之後，這僅適用。有什麼辦法可以獲得生成但尚未附加到窗口的元素的理論寬度？

（額外的信息：唐氏在功能裸露的骨頭，我只是用document.createElement()生成這些）

2011-09-27 Artur Sapek

放眼於未來母公司的寬度？ –

不要認爲這是可能的。例如，父元素可能具有類「container」，而css規則具有'.container> div {width：10px; }'你不知道，直到你添加它的元素將是10個像素的寬度。更好的方法是添加元素，獲取css值並刪除元素。 –

寬度總是根據div的內容而變化。我不想刪除元素，但我希望只使用臨時'var'。我想我只需要將它們分配爲'this.'對象，並在所有內容添加完畢後用內部函數調用它們的寬度。多謝你們。 –

這是不太實際的或有用的，但我只是寫了這個功能，通過克隆創建了一個「沙盒」父母並將其放置在屏幕外的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/

來源

2011-09-27 05:12:36

使用jQuery獲取未被佔用元素的CSS

回答

相關問題