如何获得动态创建的元素宽度和应用样式？

我动态创建一个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

如何获得动态创建的元素宽度和应用样式？

回答

相关问题