嘗試檢測CSS屬性「左」時出現JavaScript NaN錯誤？

這個問題捎帶回我昨天問的一個問題。這個問題是：嘗試檢測CSS屬性「左」時出現JavaScript NaN錯誤？

"if" statement parameters not functioning as intended. JavaScript

但現在我得到一個的NaN錯誤，當我執行下面的代碼：然而

var targetBoxLeft = parseFloat(document.getElementById("targetBox").style.left); 
bulletOne.style.left = bulletOneLeft; 

if (bulletOneLeft > targetBoxLeft){ 
document.getElementById("targetBox").style.opacity = "0"; 
};

昨天我沒有使用「parseFloat」，我問題是，如果我具體描述了targetBoxLeft的參數作爲CSS style.left屬性;爲什麼不是一個具體的數字？爲什麼它不會佔用剩下的數量：310px;由元素屬性本身指定？

#targetBox{ 
position: absolute; 
background-color: green; 
height: 20px; 
width: 20px; 
top: 30px; 
left: 310px; 
opacity: 1; 
}

從邏輯上講，以下2行代碼檢測ACTUAL數字？

var bulletOneLeft = bulletOne.style.left; 
var targetBoxLeft = targetBox.style.left;

，然後一旦上述變量被檢測爲實際的數字，應該在以下如果語句代碼能夠根據它們的值來比較它們在任何給定時間，如果運動（bulletOneLeft ++;）參與？：

if (bulletOneLeft > targetBoxLeft){ 
document.getElementById("targetBox").style.opacity = "0"; 
};

林不完全知道發生了什麼，但由於我得到NaN的錯誤時targetBox.style.left是我猜的代碼讀取，也許一個CSS屬性需要另外在我運行if聲明與相應的VAR的之前，將代碼轉換爲實際數字/變量？

來源

2017-04-09 Ghoyos

也許腳本首先加載的CSS之前不知道或試圖訪問任何其他財產 –

如果我把「PX」出它仍然把它作爲一個「串」 - 」不是個310一個數字？不要試圖諷刺，我真正的意思不是css style.left 310的屬性是一個實際的數字嗎？ – Ghoyos

您正在查詢.style.left屬性，該屬性與計算樣式不同。 .style屬性元素引用style屬性值。 parseFloat("")返回NaN。使用window.getComputedStyle()

var div = document.querySelector("div"); 
 
console.log(div.style.left, parseFloat(div.style.left)); 
 
console.log(parseFloat(window.getComputedStyle(div).getPropertyValue("left")));

div { 
 
    position: relative; 
 
    left:310px; 
 
}

<div>div</div>

來源

2017-04-09 18:13:45 guest271314

嗯gna實施，生病讓你知道，如果它在5分鐘內工作 – Ghoyos

我認爲這是正確的答案，但即時通訊難以實施它。如果我破解它，我會繼續嘗試並發表評論。 – Ghoyos

_「但我很難實現它」_你具體是什麼意思？你可以創建一個jsfiddle http://jsfiddle.net或plnkr http://plnkr.co來演示嗎？ – guest271314

嘗試檢測CSS屬性「左」時出現JavaScript NaN錯誤？

回答

相關問題