style.left不起作用的問題
阿新 • • 發佈：2019-02-01
最近除錯程式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div0 { width: 20px; height: 20px; position: absolute; border-radius: 10px; background: green; left: 50%; } </style> </head> <body> <div id="div0"></div><br/> <button id="btn1" onclick="xx()">一個向左移動的按鍵<button> </body> <script type="text/javascript"> function xx(){ var x = document.getElementById("div0"); var j = x.style.left; var z = parseInt(j.substr(0,j.length-2)); x.style.left = (z + 20)+"px" ; } </script> <html>
經除錯發現變數j的值為空，也就是無法獲取到left的值。不在css中設定left的值，而是在js中進行初始化，程式可以通過。程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div0 { width: 20px; height: 20px; position: absolute; border-radius: 10px; background: green; } </style> </head> <body> <div id="div0"></div><br/> <button id="btn1" onclick="xx()">一個向左移動的按鍵<[表情]tton> </body> <script type="text/javascript"> var x = document.getElementById("div0"); x.style.left="50%"; function xx(){ var j = x.style.left; var z = parseInt(j.substr(0,j.length-2)); x.style.left = (z + 20)+"px" ; } </script> <html>
left樣式必須寫在元素內部才能通過div.style.left直接獲取屬性值（也就是必須是內聯樣式才行），或者通過js初始化left的值，也可以獲取到left屬性。定義在css中的left樣式不能通過style.left這種方式獲取。