Question

我正在尝试将背景图像添加到动态生成的div中。当我为背景添加CSS属性时，如下所示，它会破坏我的插件：

$("<div>", {
    'class': "iviewer_image_mask",
    css: "background: url('http://somesite.com/path/to/image.jpg');"
}).appendTo(this.container);

有人知道我在添加背景图片时做错了吗？

Answer 1

当然你只能用字符串添加它，但我更喜欢这种方式，因为它更具可读性和清洁性。

$("<div>", {
    'class': "iviewer_image_mask",
    css: {
        "background": "url('http://somesite.com/path/to/image.jpg')"
    }
}).appendTo(this.container);

demo

Answer 2

根据本SO question中报告的一些基准测试，我认为使用jQuery创建HTML元素的最有效方法是：

$('<div class="iviewer_image_mask" style="background: url(http://somesite.com/path/to/image.jpg);"></div>').appendTo(this.container);

或者为了一些额外的可读性：

var elm = '<div class="iviewer_image_mask" ' +
          'style="background: url(http://somesite.com/path/to/image.jpg);">'+
          '</div>';
$(elm).appendTo(this.container);

Answer 3

$("<div>").attr({
    'class': "iviewer_image_mask",
    'style': "background: url('http://somesite.com/path/to/image.jpg');"
}).appendTo("body");

如果你真的需要按属性附加它。

Answer 4

$("<div>")
    .addClass('iviewer_image_mask')
    .css('background', "url('http://somesite.com/path/to/image.jpg')")
    .appendTo(this.container);

Answer 5

我在这本书Beginning JavaScript and CSS Development with jQuery中读到：

在前面的章节中，您已经看到了jQuery用于操纵类名的addClass（），hasClass（）和removeClass（）方法的示例。最好避免直接在您的JavaScript代码中放置样式声明，而是通过在您的JavaScript中放置样式来保持行为和表示分离，这是客户端网络开发中的最佳做法。 CSS和操纵元素的类名，以用于需要操纵样式的情况。这被认为是最佳做法，原因如下：最有意义。由于您的所有演示文稿都整齐地包含在CSS中，您的行为在JavaScript中，在您的结构中也包含在HTML中，因此您可以更容易地预测在哪里进行修改，因此文档的管理变得更加容易。如果您的样式以内联方式分散在HTML，JavaScript和实际样式表中，则更改文档的显示方式将变得更加困难。

以此类推，使用类名。为了您的目的。像这样：

$('<div class="iviewer_image_mask background-image"></div>').appendTo(this.container);

使用jquery动态创建div

5 个答案: