Chuyển đổi chuỗi chiều rộng css thành số thường là

Question

Trong khi cố tính toán chiều rộng của một phần tử ẩn, tôi thấy rằng jquery.width() trả về 0 cho chiều rộng của các phần tử đó.

Tôi phát hiện ra rằng việc sử dụng jquery.css ('width') sẽ trả lại chiều rộng chính xác bằng cách sử dụng chiều rộng kiểu được khai báo (ngay cả khi giá trị đó khác với biểu định kiểu ban đầu). Vấn đề là phương thức css ('width') trả về một chuỗi, thường là theo kiểu "100px". Câu hỏi của tôi giải quyết vào: làm thế nào để lấy số từ chuỗi "100px"? Có cách nào dễ dàng không?

Answer 1

Nếu nó luôn luôn trả về ở định dạng px, "100px", "50px" vv (tức là không phải là "em" hoặc phần trăm), bạn có thể chỉ ...

var width = parseInt($("#myelem").css("width"),10); // always use a radix 

hoặc

var width = parseInt(element.style.width,10); // always use a radix 

Nó bỏ qua hậu tố "px", do đó bạn nên làm tốt.

Mặc dù sâu xuống Tôi nghĩ rằng có điều gì đó không đúng nếu $ ("# myelem"). Width() không hoạt động.

Lưu ý về các yếu tố bị ẩn.

Nếu bạn đang thêm jQuery để tăng dần trang của bạn, phần tử bạn đang tính sẽ hiển thị khi trang tải lần đầu tiên. Vì vậy, bạn sẽ nhận được chiều rộng trước khi ban đầu ẩn phần tử. Bằng cách này, $ ("# myelem"). Width() sẽ hoạt động.

var myWidth = 0; 

$(document).ready(function() { 
    myWidth = $("#myelem").width(); 
    $("#myelem").hide(); 
}); 

Answer 2

Ồ, tôi đã đưa ra:
new Number($elem.css('width').slice(0, -2));
//to extract the 'px' and return a regular number

Bây giờ tôi chỉ hy vọng rằng jquery allways trả về cùng một chuỗi thời trang: "100px"

Answer 3

tôi sẽ dính vào .width() bởi vì nó thực sự nhận được chiều rộng được tính thay vì chiều rộng css. Thay vì ẩn nó bằng .hide() (display: none), bạn có thể ẩn nó bằng .css('visible', 'hidden') sau đó .width() sẽ hoạt động.

từ nhận xét của tôi Nếu bạn không muốn thay đổi bạn .hide() của sau đó bạn có thể áp dụng visible: hidden và sau đó .show() và sau đó đo chiều cao. Sau khi bạn đã đo nó, đảo ngược điều đó. Các đối tượng vẫn ảnh hưởng đến bố cục trang khi chúng bị ẩn bởi visible: hidden - hãy cẩn thận về điều đó.

Để tránh các thẻ gây rối với bố cục, bạn có thể đặt vị trí thành tuyệt đối, di chuyển nó đến thẻ body và sau đó đo.

Answer 4

Bạn có thể xóa các số không bằng một cụm từ thông dụng và sau đó chỉ chuyển đổi thành một số. Tính năng này hoạt động bất kể bạn xác định chiều rộng như thế nào (px, em, %, pt). Bảo tồn các điểm thập phân quá.

vani javascript

Number(elem.style.width.replace(/[^\d\.\-]/g, '')); 

jQuery

Number($elem.css('width').replace(/[^\d\.\-]/g, '')); 

Answer 5

Trong đồng bằng JavaScript:

parseInt('100px', 10) 

trình với "100em", "100%", và ngay cả với : "100". Không cần bất kỳ mẫu biểu thức chính quy nào.