lấy kích thước lề của một phần tử với jquery

Question

Làm cách nào để có được các thuộc tính của một phần tử với jquery? Tôi muốn nhận được kích thước của lợi nhuận của một div nói riêng.

tôi đã thiết lập các phong cách của div trong một file .css, ví dụ,

.item-form { 
    margin:0px 0px 10px 0px; 
    background: blue; 
} 

html,

<form> 
... 

<div class="item-form"> 
    <textarea class="autohide"></textarea> 
</div> 

... 

</form> 

Tôi đã thử với mã này, nhưng nó không rõ ràng,

$(".autohide").each(function(){ 

var $this = $(this); 
alert($this.parents("div:.item-form").css("margin")); 


}); 

bất kỳ ý tưởng nào? cảm ơn.

Answer 1

Thẻ CSS 'lề' thực sự là viết tắt của bốn giá trị ký quỹ riêng biệt, trên cùng/trái/dưới/phải. Sử dụng css('marginTop'), v.v. - lưu ý rằng chúng sẽ có 'px' ở cuối nếu bạn đã chỉ định chúng theo cách đó.

Sử dụng parseInt() xung quanh kết quả để biến nó thành giá trị số.

NB. Theo ghi chú của Omaty, thứ tự của thẻ 'ký quỹ' viết tắt là: top right bottom left - danh sách trên không được viết theo cách dự định là thứ tự danh sách, chỉ là danh sách được chỉ định trong thẻ.

Answer 2

Bạn sẽ muốn sử dụng ...

alert($this.parents("div:.item-form").css("marginTop").replace('px', '')); 
alert($this.parents("div:.item-form").css("marginRight").replace('px', '')); 
alert($this.parents("div:.item-form").css("marginBottom").replace('px', '')); 
alert($this.parents("div:.item-form").css("marginLeft").replace('px', '')); 

Answer 3

Từ jQuery's website

tính Shorthand CSS (ví dụ lề, nền, biên giới) không được hỗ trợ. Ví dụ: Ví dụ: nếu bạn muốn truy xuất lề đã trả, hãy sử dụng: $ (elem) .css ('marginTop') và $ (elem) .css ('marginRight'), v.v.

Answer 4

dụ, đối với:

<div id="myBlock" style="margin: 10px 0px 15px 5px:"></div> 

Trong này js mã:

var myMarginTop = $("#myBlock").css("marginBottom"); 

Các var trở thành "15px", một chuỗi.

Nếu bạn muốn Số nguyên, để tránh NaN (Không phải số), có nhiều cách.

nhanh nhất là sử dụng phương pháp bản địa js:

var myMarginTop = parseInt($("#myBlock").css("marginBottom"));