jQuery css ('padding') - Vấn đề với Firefox

Question

Có vẻ như Firefox (ít nhất là v19.0.2) có vấn đề với chức năng jQuery css(), khi bạn cố gắng lấy một phần tử padding.

Tôi không gặp vấn đề gì khi sử dụng .css('padding-left'), nhưng sẽ tốt hơn khi viết một dòng thay vì 4, đặc biệt là trên một tính năng đơn giản như thế này.

Dưới đây là một ví dụ cho thấy vấn đề của tôi, hãy so sánh hành vi Chrome/Firefox:

$('#log').append(
 
    'padding : '+  $('#sample').css('padding')+'\n'+ 
 
    'padding-top : '+ $('#sample').css('padding-top')+'\n'+ 
 
    'padding-bottom : '+ $('#sample').css('padding-bottom')+'\n'+ 
 
    'padding-left : '+ $('#sample').css('padding-left')+'\n'+ 
 
    'padding-right : '+ $('#sample').css('padding-right')+'\n' 
 
);

#sample { 
 
    border: 1px solid black; 
 
    padding: 8px; 
 
    margin: 10px; 
 
} 
 
#log { 
 
    padding: 8px; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="sample">Lorem ipsum</div> 
 
<textarea id="log" rows="10" cols="50"></textarea>

Tôi có thiếu gì không? Hoặc có cách giải quyết nào để truy xuất padding của một phần tử mà không cần gọi 4 chức năng không?

Cảm ơn.

Answer 1

Xem bug #13421 (mặc dù đây không thực sự là lỗi).

Các tài liệu cho css() nói:

thuộc tính CSS Shorthand (ví dụ margin, background, border) không được hỗ trợ. Ví dụ: nếu bạn muốn truy xuất lề được hiển thị, hãy sử dụng : $(elem).css('marginTop') và $(elem).css('marginRight') và do đó bật.

padding là một tài sản đó, vì vậy bạn thực sự sẽ phải sử dụng paddingLeft, paddingRight vv