使用jQuery創建元素並添加樣式屬性

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