Obtenir un nombre pour une valeur de style SANS le suffixe "px;"

Je crée un jeu RTS en Javascript et en HTML. Cela me semble ambitieux, mais je ne tire pas les étoiles ici. Juste un petit peu pour me divertir.

Je travaille actuellement sur la partie mouvement du jeu. J'ai un moteur de mouvement qui devrait fonctionner, mais il y a un problème. Dans mon script, je compare les valeurs actuelles gauche et supérieure d'un caractère absolument positionné à celles de sa cible (qui peut être en mouvement) en utilisant des instructions d'inégalité ( > et < ). Le problème est que les commentaires que je reçois forment document.getElementById(nameVar).style.left est sous la forme d'une chaîne (par ex. 200px ) pas un nombre (par ex. 200 ), donc les comparaisons ne fonctionnent pas.

Ma question est: est-ce qu'il y a un moyen de transformer la chaîne en un nombre que je peux manipuler comme je le veux? Soit en utilisant une adresse modifiée, soit en préformant une procédure avec les commentaires une fois que je l'ai compris.

Toute aide est la bienvenue.

parseInt vous donne la valeur numérique:

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

Ou, comme le suggère @PeteWilson dans les commentaires, utilisez parseFloat

Une approche alternative à celle de Konsolenfreddy consiste à utiliser:

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

Démo de JS Fiddle .

Le bénéfice de cette approche est qu'il fonctionne pour récupérer la valeur définie dans CSS, indépendamment de la définition de cette valeur dans l'attribut style de l'élément ou dans une feuille de style liée, dont je pense que l'approche de Konsolenfreddy est limitée.

Les références:

window.getComputedStyle() .
document.getElementById() .
match() .
Expressions régulières .

Note :

Je n'ai pas pu trouver une bonne référence pour getPropertyValue() , autre que montrer son utilisation dans la référence liée pour getComputedStyle() . Si quelqu'un est en mesure de trouver une bonne référence , modifiez-la dans les références ou laissez un commentaire et je l'ajouterai dès que possible.

Vous pouvez utiliser .offsetLeft et .offsetTop pour obtenir des valeurs sans px et le type de retour est numérique.

Demo: http://jsfiddle.net/ThinkingStiff/2sbvL/

Scénario:

 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; }

Sortie:

Entrez la description de l'image ici