Javascript - event.clientX & style.left - Математические операции

Question

У меня проблема с lil 'здесь. Позвольте мне объяснить:

document.getElementById(" ... ").style.left (горизонтальное положение объекта) вернет значение, подобное этому: 100px или 1129px.

event.clientX (горизонтальное положение указателя мыши) вернет значение, подобное этому: 100 или 1337.

Я хочу сделать математику между этими двумя. Например: var x = (document.getElementById(" ... ").style.left) + (event.clientX)

Как это сделать, когда вы возвращаете значение с px, а другое без? Как я могу получить обычный номер/px-номер из этого? Кажется, что нет работы только для добавления (event.clientX) + "px" или document.getElementById(" ... ").style.left - "px"

С уважением! Комментарий, если что-то неясно, я полагаю!

Answer 1

Выполнение добавления на строках заставит Javascript попытаться объединить их вместо выполнения фактической математики. Выполнение вычитания строк, содержащих символы, отличные от чисел, приведет к сбою Javascript при попытке конвертировать их в числа и даст вам NaN.

Вам необходимо преобразовать строку, указанную вами document.getElementById(" ... ").style.left, в целое число с использованием parseInt. parseInt будет удобно игнорировать нечисловые символы, такие как «px».

Итак, если w = document.getElementById(" ... ").style.left вы можете получить число в пикселях, выполнив parseInt(w). Вы можете сделать математику со значением, возвращаемым parseInt, потому что это будет целое число.