parseFloat返回NaN（解析文檔樣式大小時）

body樣式parseFloat不斷返回NaN，當它應該是-0.1或0.1時，我在console.log中打印它，我最有可能只是變得很累，但我看不到問題。任何幫助是極大的讚賞一如既往，還沒有尋找一個jQuery回答這裏，這必須是JSparseFloat返回NaN（解析文檔樣式大小時）

function startUp() { 
    var fontButtons = document.getElementsByClassName("fontsizer"); 
    for (var i=0; i < fontButtons.length; i++) { 
    document.getElementsByClassName("fontsizer")[i].addEventListener("click", resizeText); 
    } 
}; 

window.onload = startUp; 

function resizeText() { 
    var fontChange = parseFloat(this.value); 
    console.log(fontChange); 
    if (document.body.style = "") { 
     document.body.setAttribute("style", "font-size:1.0em;"); 
    } 
    var currentFontSize = parseFloat(document.body.style.fontSize.replace('em', '')); 
    console.log(currentFontSize); 
    document.body.style.fontSize = (currentFontSize + fontChange) + "em"; 
};

和HTML

<div id="fontbuttons"> 
<input class="fontsizer" value="-0.1" type="image" id="fontdown" alt="-" src="fontdown.png" /> 
<input class="fontsizer" value="0.1" type="image" id="fontup" alt="+" src="fontup.png" /> 
</div>

來源

2014-12-05 dav3ydark007

......究竟什麼是'document.body.style.fontSize.replace（ '時間'， ''）'？ – Doorknob 2014-12-05 01:52:23

不是你的問題，但爲了提高效率，'document.getElementsByClassName（「fontsizer」）[i]'應該是'fontButtons [i]'。 – RobG 2014-12-05 01:52:45

'document.body.style =「」'指定一個空字符串來替換主體的樣式對象。你真的*想要這樣做嗎？ – RobG 2014-12-05 01:54:52

=是賦值，所以此行實際上意味着清晰的主體風格。

if (document.body.style = "") {

然後它返回指定值（空字符串）if聲明，而""是falsy值，所以檢查實際上是if(false) {...。你永遠不會有字體大小設置。

您應該使用==或===比較

if (document.body.style == "") {

document.body.style是一個對象，它決不應等於空字符串。你應該比較document.body.style.fontSize。

使用document.body.style.fontSize = "1.0em"超過document.body.setAttribute。由於setAttribute只更改HTML屬性，而您想要的是DOM屬性。

編輯：我錯過了一件東西，正如Roko C. Buljan所指出的那樣。當你在CSS中設置字體大小時，document.body.style.fontSize仍然是空字符串，除非你用JS來操縱它。你最好與計算風格進行比較，解決方法在他的答案中得到解決。

function startUp() { 
 
    var fontButtons = document.getElementsByClassName("fontsizer"); 
 
    for (var i = 0; i < fontButtons.length; i++) { 
 
     fontButtons[i].addEventListener("click", resizeText); 
 
    } 
 
}; 
 

 
window.onload = startUp; 
 

 
function resizeText() { 
 
    var fontChange = parseFloat(this.value); 
 
    console.log(fontChange); 
 

 
    if (document.body.style.fontSize == "") { 
 
     document.body.style.fontSize = "1.0em"; 
 
    } 
 

 
    var currentFontSize = parseFloat(document.body.style.fontSize.replace('em', '')); 
 
    console.log(currentFontSize); 
 
    document.body.style.fontSize = (currentFontSize + fontChange) + "em"; 
 
};

<div id="fontbuttons"> 
 
<input class="fontsizer" value="-0.1" type="button"> 
 
<input class="fontsizer" value="0.1" type="button"> 
 
</div> 
 
<p>text</p>

來源

2014-12-05 02:20:00 Leo

謝謝！完美的作品 – dav3ydark007 2014-12-05 02:30:52

@ dav3ydark007更新了一點，以解釋與'='運算符相比真正發生了什麼。希望它能幫助你:) – Leo 2014-12-05 02:32:36

請注意，即使你已經在CSS中設置了它，「document.body.style.fontSize」將總是返回'「」'，就像我在我的答案中所解釋的那樣。所以如果一個人爲'body'設置一個像'1.2em'這樣的大小，就可以期待奇怪的結果。 – 2014-12-05 02:42:30

好吧，讓我們說我們有字體大小設置在1.2em

/*CSS:*/ body{ font-size: 1.2em; }

在JS如果你測試：

console.log(document.body.style.fontSize); // *(and empty string)*

所以，你需要做的，如：

var style = window.getComputedStyle(document.body, null);  
console.log(style.fontSize); // "19.2px"

無賴，但我們預計em，對不對？

對於每一個瀏覽器設置默認字體大小爲16px（google it），你可以通過簡單地將是由我們的getComputedStyle由16

var style = window.getComputedStyle(document.body, null); // .fontSize = "19.2px" 
var currentFontSize_EM = parseFloat(style.fontSize)/16 // 1.2 

document.body.style.fontSize = (currentFontSize_EM + fontChange) + "em";

那就是返回的檢索px value任何em值它。

來源

2014-12-05 02:06:32

parseFloat返回NaN（解析文檔樣式大小時）

回答

相關問題