如何獲得動態創建的元素寬度和應用樣式？

我動態創建一個li元素是這樣的：如何獲得動態創建的元素寬度和應用樣式？

$(data).find('slide').each(function(numSlide){ 
    var slideLink = $(this).attr('link'); 
    var slideimage = $(this).children('slideimage').text(); 
    var slidedesc = $(this).children('slidedesc').text(); 

    $('.slider ul').append('<li><a href="'+slideLink+'"><img src="'+root+"images/top-slider-image/"+slideimage+'" alt="welcome to Burger Davis Blog" /></a><div class="note">'+slidedesc+'</div></li>'); 
})

但我想計算li的寬度，我需要一些樣式應用到它 - 我該怎麼辦呢？如果我通過css方法添加樣式，它不適用於動態創建的元素...

請幫助我獲取動態元素的寬度以及如何將樣式應用到該元素中？

我知道我們可以使用live功能，但我不能由扯平..

來源

2010-05-30 3gwebtrain

CSS應該工作得很好..創建一個css規則，比如'.slider ul li.note {color：red;}'，看看動態'li'中的描述是否變成紅色。 – 2010-05-30 17:14:49

問題是' .css（）'不適合你，還是你需要在元素被添加到DOM之前獲取寬度？ – user113716 2010-05-30 17:26:33

$(data).find('slide').each(function(numSlide){ 
    var slideLink = $(this).attr('link'); 
    var slideimage = $(this).children('slideimage').text(); 
    var slidedesc = $(this).children('slidedesc').text(); 
    var li = $('<li><a href="'+slideLink+'"><img src="'+root+"images/top-slider-image/"+slideimage+'" alt="welcome to Burger Davis Blog" /></a><div class="note">'+slidedesc+'</div></li>'); 
    $('.slider ul').append(li); 
    var w = li.outerWidth(); 
    li.css('width', w + 100); 
})

這是一個人爲的樣本。在append外部創建鏈接，以便您可以直接訪問它，並使用innerWidth（）或outerWidth（）來獲取寬度值。然後引用你創建的項目的CSS函數。在這個例子中，我只取當前的寬度並添加100。

來源

2010-05-30 17:38:57 Gabriel

感謝您的建議。它工作正常..！ – 3gwebtrain 2010-05-31 07:26:57

-2

元素的寬度，一旦它被添加到DOM，是

element.offsetWidth

來源

2010-05-30 17:31:01 Maz

如何獲得動態創建的元素寬度和應用樣式？

回答

相關問題