Dodać wartości pikseli javascript?

Question

Czy istnieje sposób w javascript/jQuery, aby pobrać dwie zmienne o wartościach "60px" i "40px" i dodać je razem, aby uzyskać "100px"?

Albo w bardziej ogólnym sensie, próbuję obliczyć położenia obiektów względem innych obiektów i byłoby bardzo wygodne, jeśli mogę zrobić coś takiego:

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

oczywiście, że tak podaje nieprawidłowy "40px60px".

Answer 1

usuń px z ciągów znaków, należy dodać wartości, a następnie dodać px powrotem

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

Answer 2

Szukacie funkcji parseInt().

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

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

Warto również zapoznać się z metodą parseFloat(). Działa to tak samo, jak parseInt(), ale działa na liczbach z liczbami dziesiętnymi (również wartości zmiennoprzecinkowe).

Answer 3

Można to zrobić przez parsowania wartości css.left obiektu, nieco jak poniżej:

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

Ale należy pamiętać, że wartość css.left może nie być px, ale także %, em itd., Więc czystym sposobem byłoby użycie jQuery offset method, ponieważ dałoby to poprawną wartość pikseli.

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

Answer 4

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

parseFloat będzie analizować jedynie prefiks ciąg, który jest liczbą.

Answer 5

Prawdopodobnie najbardziej skutecznym sposobem jest

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

The 10 JEST W zaproszeniach parseInt są konieczne do ochrony przed wartością jest błędnie obliczony w czymś innym niż podstawy 10.