2012-08-24 21 views
13

Tôi đang cố gắng tăng vị trí của một phần tử theo, giả sử, x pixel. Đây là những gì tôi đã cố gắng cho đến nay:Sử dụng JavaScript để tăng các giá trị trên cùng/trái/dưới/phải

var top = document.getElementById("something").style.top; 
top = top + "300px" 

Tôi biết rằng điều này sẽ không hoạt động, nhưng tôi đã tự hỏi liệu có thể tăng giá trị vị trí như thế này không.

+2

Tại sao này downvoted? Đây là một câu hỏi hoàn toàn hợp lệ. – Brad

Trả lời

11

Bởi vì style.top là một chuỗi với các đơn vị ở cuối của nó như "300px" bạn chỉ có thể làm toán với nó khi bạn chỉ chuyển đổi phần số thành một số thực.

Giả sử bạn có phần tử vị trí (do đó, đặt giá trị top sẽ làm điều gì đó) và bạn đã đặt phong cách top trực tiếp trên phần tử và không được đặt qua CSS (để nhận được obj.style.top thực sự giúp bạn), bạn có thể làm điều đó bằng cách phân tích các số ra khỏi giá trị kiểu như thế này:

var obj = document.getElementById("something"); 
var topVal = parseInt(obj.style.top, 10); 
obj.style.top = (topVal + 300) + "px"; 

dụ làm việc: http://jsfiddle.net/jfriend00/pt46X/

+0

Tôi đã gõ một mã nhỏ: http://jsfiddle.net/wLf35/ Tôi dường như không thể tìm thấy lỗi ở đây mặc dù. – day0

+1

@ day0 - Như tôi đã nói trong câu trả lời của tôi, 'obj.style.top' sẽ không truy lục giá trị được đặt trong CSS. Bạn sẽ cần sử dụng phiên bản trình duyệt chéo của 'window.getComputedStyle()' nếu kiểu của bạn được đặt thông qua CSS. 'obj.style.top' chỉ lấy các giá trị kiểu được đặt trực tiếp trên đối tượng (không phải thông qua CSS). Trong jsFiddle, bạn cũng phải đặt mã là đầu hoặc phần thân để các hàm của bạn nằm trong phạm vi toàn cục và sẽ có thể truy cập theo cách bạn đang gọi chúng. Xem tại đây: http://jsfiddle.net/jfriend00/CG68f/ – jfriend00

+0

Ah thật tuyệt! Cảm ơn nhiều. Tôi đã không đi qua '.getComputedStyle()' bất cứ nơi nào. Cảm ơn một lần nữa! – day0

2

Điều đó sẽ không hoạt động tốt bởi vì, ví dụ, nếu top đã có một giá trị của 200px, nó sẽ trở nên "200px300px". Hãy thử điều này:

var elem = document.getElementById("something"); 
elem.style.top = parseInt(elem.style.top, 10) + 300 + "px" 

Demo WEEEE!!!!

+0

ĐỂ DỪNG NGAY! – BNL

Các vấn đề liên quan