Question

我有以下脚本。我没有展示它，但我后来进一步操纵DOM。我在测试1和测试2中得到相同的结果，但是使用测试3得到不同的结果。与测试3有什么不同？请确认测试1和测试2的影响是否相同。如果你认为测试3必须提供相同的结果，我会将我的完整代码发布到一个小提琴，以证明它不是。

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的工作原理。

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

1 个答案: