Получить число для значения стиля БЕЗ "px;" суффикс

Я делаю RTS-игру в Javascript и HTML. Звучит амбициозно, я знаю, но я не стреляю по звездам здесь. Просто немного, чтобы развлечь меня.

В настоящее время я работаю над частью движения. У меня есть механизм движения, который должен работать, но есть проблема. В моем script я сравниваю текущие левые и верхние значения абсолютно позиционированного символа с данными его цели (которая может перемещаться) с использованием операторов неравенства (> и <). Проблема в том, что обратная связь, которую я получаю в форме document.getElementById(nameVar).style.left, имеет форму строки (например, 200px), а не числа (например, 200), поэтому сравнения не работают.

Мой вопрос: есть ли способ превратить строку в число, которое я могу манипулировать так, как я хочу? Либо используя измененный адрес, либо предварительно сформировав некоторую процедуру с обратной связью, как только я ее получу.

Любая помощь будет большой.

Ответы

Ответ 1

parseInt дает числовое значение:

var tmp = parseInt(document.getElementById(nameVar).style.left, 10);
console.log(tmp);

или, как предлагает @PeteWilson в комментариях, используйте parseFloat

Ответ 2

Альтернативный подход к Konsolenfreddy заключается в использовании:

var numericValue = window
    .getComputedStyle(document.getElementById('div'),null)
    .getPropertyValue('left')
    .match(/\d+/);

JS Fiddle demo.

Преимущество этого подхода состоит в том, что он работает для извлечения значения, установленного в CSS, независимо от того, какое значение установлено в атрибуте style элемента или в связанной таблице стилей, что, я думаю, Консоленфредды ограничивается.

Литература:

Примечание

Мне не удалось найти хорошую ссылку для getPropertyValue(), кроме показа ее использования в связанной ссылке для getComputedStyle(). Если кто-нибудь может найти хорошую ссылку, отредактируйте это в ссылках или оставьте комментарий, и я добавлю его, как только смогу.

Ответ 3

Вы можете использовать .offsetLeft и .offsetTop для получения значений без px, а тип возврата - числовой.

Демо: http://jsfiddle.net/ThinkingStiff/2sbvL/

Script:

var result = document.getElementById( 'result' ),
    position = document.getElementById( 'position' );

result.textContent = position.offsetLeft + ', ' + position.offsetTop;

HTML:

<div id="position"></div>
<div id="result"></div>

CSS

#position {
    border: 1px solid black;
    height: 50px;
    left: 50px;
    position: absolute;
    top: 50px;
    width: 50px;
}

Вывод: