javascript - 使用 jQuery 创建元素并添加样式属性

Question

我有以下脚本。我没有展示它，但我后来进一步操作了 DOM。我在测试 1 和测试 2 中得到相同的结果，但在测试 3 中得到不同的结果。测试 3 有何不同？请确认测试 1 和测试 2 的影响相同。如果您认为测试 3 必须提供相同的结果，我会将完整的代码发布到 fiddle 上以证明事实并非如此。

var thead_cells=$('#myTable').children( 'thead' ).find('tr').eq(0).find('th'),

var shimRow=$('<tr />',{height:0,padding:0,margin:0});

for (var i = 0; i < thead_cells.length; i++) {

    //test 1
    shimRow
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true)})
        .css('padding',0)
        .css('margin',0)
        .html(''));

    //test 2
    shimRow
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true), css:{padding:0, margin:0}})
        .html(''));

    //test 3
    shimRow
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true), padding:0, margin:0})
        .html(''));

}

Answer 1

测试 1 和测试 2 是否相同将完全取决于您通过样式表分配给 td 元素的样式。在测试 2 中，您将覆盖任何样式表指定的填充和边距；在测试 1 中，你不是。

测试 3 不起作用，因为 padding 和 margin 不是可以直接分配给 td 元素的属性；这就是为什么前两个部分中有 css 部分，它调用 jQuery 的 css 函数(在 jQuery 1.8 及更高版本中)。

值得好好读一读the jQuery(html, attributes) documentation了解测试 2 的工作原理。