Nhận số cho giá trị kiểu KHÔNG CÓ "px;" hậu tố

Question

Tôi đang tạo trò chơi RTS bằng Javascript và HTML. Nghe có vẻ đầy tham vọng, tôi biết nhưng tôi không bắn cho các vì sao ở đây. Chỉ cần một chút gì đó để giữ cho tôi giải trí.

Tôi hiện đang làm việc trên phần chuyển động của trò chơi. Tôi có một động cơ chuyển động nên hoạt động, nhưng có một vấn đề. Trong kịch bản của tôi, tôi so sánh các giá trị bên trái và trên cùng của một ký tự được định vị hoàn toàn với các giá trị đích của nó (có thể di chuyển) bằng cách sử dụng các câu lệnh bất bình đẳng (> và <). Vấn đề là phản hồi tôi nhận được biểu mẫu document.getElementById(nameVar).style.left ở dạng một chuỗi (ví dụ: 200px) không phải là một số (ví dụ: 200), vì vậy các so sánh không hoạt động.

Câu hỏi của tôi là, có cách nào để biến chuỗi thành một số mà tôi có thể thao tác theo cách tôi muốn không? Hoặc bằng cách sử dụng một địa chỉ thay đổi hoặc bằng cách preforming một số thủ tục với các thông tin phản hồi một khi tôi nhận được nó.

Mọi trợ giúp đều tuyệt vời.

Answer 1

parseInt mang đến cho bạn giá trị bằng số:

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

hoặc, như @PeteWilson gợi ý trong các ý kiến, sử dụng parseFloat

Answer 2

Một cách tiếp cận thay thế cho một trong những từ Konsolenfreddy, là sử dụng:

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

JS Fiddle demo.

Lợi ích của phương pháp này là nó hoạt động để lấy giá trị thiết lập trong CSS, bất kể giá trị được thiết lập trong style thuộc tính của nguyên tố này hoặc trong một stylesheet liên kết, mà tôi nghĩKonsolenfreddy 's phương pháp là Giới hạn bởi.

Tài liệu tham khảo:

• window.getComputedStyle().
• document.getElementById().
• match().
• Regular Expressions.

Note:

tôi đã không thể tìm thấy một tài liệu tham khảo tốt cho getPropertyValue(), trừ cho thấy việc sử dụng nó trong các tài liệu tham khảo liên kết cho getComputedStyle(). Nếu bất kỳ ai có thể tìm thấy tài liệu tham khảo tốt , vui lòng chỉnh sửa nội dung đó vào tham chiếu hoặc để lại nhận xét và tôi sẽ thêm nhận xét đó ngay khi có thể.

Answer 3

Bạn có thể sử dụng .offsetLeft và .offsetTop để nhận giá trị mà không cần px và loại trả về là số.

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

Output:

01.235.