Question

我正在使用.append()构建一些网页，以便将元素添加到另一个生成的父元素中。我想为添加的元素设置样式，但是没有应用使用.css()给它们的样式，可能是因为这些元素尚未添加到页面中呢？

这是我的代码：

var stickyHeader = $("<div></div>");

$(".stickyHeader").find("th").each(function() {
    var offset = $(this).offset().left;
    var objWidth = $(this).width();

    stickyHeader.append("<span>" + $(this).html() + "</span>").css({width: objWidth, top: 0, left: offset, position: 'fixed'});
});

$("body").append("<div class=\"stickyHeader\">" + stickyHeader.html() + "</div>");

我是否需要另一个.each()在span添加body后循环显示span，或者是否有更好，更清洁的解决方案？

我忘了提到每个{{1}}都是从页面上的另一个元素给出一个宽度，所以这不能仅用CSS和类来完成。

Answer 1

您正在将css应用于容器div而不是附加的元素，我想这就是您所追求的。尝试：

var span = $("<span>" + $(this).html() + "</span>");
             .css({width: objWidth, 
                   top: 0, 
                   left: offset, 
                   position: 'fixed'});
stickyHeader.append(span);

Answer 2

.append强制重绘。这会消耗资源并降低UI的速度。最好在对象或字符串中构建HTML，并将其一次性插入DOM中。

让CSS进行繁重的工作，最好是从外部样式表中完成。必须解析内联样式，这也会减慢速度。

Answer 3

为新元素添加样式的漂亮，干净的解决方案是确保它们具有正确的类/ ID并且您有一个编写良好的CSS样式表。

Answer 4

如果要附加到元素的类已经在css文件中定义和设置样式，那么该元素将自动采用这些样式。

Answer 5

另一个解决方案，使用css文件^^，查看我的jsfiddle

样式附加元素

5 个答案: