Thêm giá trị pixel javascript?

Question

Có cách nào trong javascript/jQuery để có hai biến với giá trị "60px" và "40px" và thêm chúng lại với nhau để có được "100px" không?

Hoặc theo nghĩa tổng quát hơn, tôi đang cố gắng để tính toán vị trí của các đối tượng liên quan đến các đối tượng khác và nó sẽ thực sự tiện lợi nếu tôi có thể làm một cái gì đó như thế này:

$('#object2').css('left', $('#object1').css('left')+'60px'); 

Tất nhiên, đó chỉ cung cấp "40px60px" không hợp lệ.

Answer 1

remove px từ chuỗi, thêm giá trị, sau đó thêm px lại

(parseInt("40px".replace(/px/,""))+60)+"px" 

Answer 2

Bạn đang tìm kiếm parseInt() chức năng.

var left1 = "40px"; 
var left2 = "60px"; 

// Add the integer values of the left values together 
var leftTotal = parseInt(left1, 10) + parseInt(left2, 10) + "px"; 

Điều tra giá trị cũng là phương pháp parseFloat(). Nó thực hiện tương tự như parseInt(), nhưng hoạt động trên các số có số thập phân (còn gọi là các giá trị dấu phảy động).

Answer 3

Bạn có thể làm điều này bằng cách phân tích các giá trị css.left của đối tượng, phần nào như thế này:

$('#object2').css('left', (parseInt($('#object1').css('left')) + 60) + 'px'); 

Nhưng bạn nên lưu ý, rằng giá trị css.left có thể không được px nhưng cũng có thể là %, em, v.v. do đó cách sạch sẽ sẽ sử dụng jQuery offset method vì điều đó sẽ cung cấp cho bạn giá trị pixel chính xác.

$('#object2').css('left', ($('#object1').offset().left + 60) + 'px'); 

Answer 4

var shiftedRight = (parseFloat($('#object1').css('left')) + 60) + 'px'; 
$('#object2').css('left', shiftedRight); 

parseFloat sẽ phân tích chỉ tiền tố của chuỗi đó là một số.

Answer 5

Có lẽ cách hiệu quả nhất là

parseInt("40px", 10) + parseInt("60px", 10) + "px" 

Các 10 's trong các cuộc gọi parseInt là cần thiết để bảo vệ chống lại các giá trị bị nhầm lẫn tính bằng một cái gì đó khác hơn là cơ sở 10