修改外部CSS值

嗨我試圖動態地改變使用JavaScript的部門的高度，但我只能讓JS讀取div的高度元素，如果它定義使用HTML標記內的樣式標記。修改外部CSS值

如果它在一個單獨的工作表返回NaN，我假設，因爲它無法找到一個值，實際上返回null（我使用ParseInt使其工作）。

下面是HTML：

<div id="dropdown_container"> 
    <div id="dropdown" style="height:100px;"> 
    a 
    </div> 
</div>

（祝HTML stlye標記）

這裏是JS：

function clickDown() { 
    var el = document.getElementById('dropdown'); 
    var maxHeight = 200; 
    getHeight = parseInt(el.style.height.substring(0,(el.style.height.length)-2)); 
    console.log(getHeight); 
    getHeight += 2; 
    el.style.height = getHeight + 'px'; 
    timeoutHeightInc = setTimeout('clickDown()',15); 
    if(getHeight >= maxHeight){ 
     clearTimeout(timeoutHeightInc); 

    } 
}

有誰知道的原因（MIS ？）functionaility。併爲其提供解決方案？

這裏是一個jsFiddle。

嘗試將高度移至CSS以查看我遇到的問題。

來源

2012-08-12 wezternator

沒有不同，NaN不意味着一個數字，不爲空。返回NaN意味着你正在嘗試將某些內容讀取爲不是的文本。 – Polyov 2012-08-12 21:25:03

'parseInt'會自動刪除'px'，但是你不應該忽略[radix]（https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt）。 'getHeight = parseInt（el.style.height，10）'如果'height'不是'auto'，則應該工作。傳遞一個字符串以通過'setTimeout'進行評估是不好的習慣，當你傳遞一個函數調用時更是如此。更好地傳遞函數參考'setTimeout（clickDown，15）;'沒有eval就做同樣的事情。你可以嘗試在http://jsfiddle.net/上重現行爲嗎？ – 2012-08-12 21:30:47

@SomekidwithHTML我知道這意味着，我補充其可能返回null，然後parseInt它試圖把它變成一個數字廣告投擲NaN回 – wezternator 2012-08-12 21:36:23

ParseInt缺少它的基數。

你說：

我只能讓JS讀取div的高度元素，則將其使用HTML標記內部風格標籤定義

現在你只讀取div的屬性樣式。你設置了內聯。所以如果你刪除它，那麼你就再也看不到它了。合理？

您想獲得計算出的高度。請嘗試：.offsetHeight

測試案例的基礎與公司一起玩。固定基數。 this fiddle

UPDATE：田田：固定的，看到this updated fiddle

function clickDown() { 
    var el = document.getElementById('dropdown'); 
    var maxHeight = 200; 
    getHeight = parseInt(el.offsetHeight,10); 
    console.log(getHeight); 
    getHeight += 2; 
    el.style.height = getHeight + 'px'; 
    timeoutHeightInc = setTimeout('clickDown()',15); 
    if(getHeight >= maxHeight){ 
     clearTimeout(timeoutHeightInc); 

    } 
}

來源

2012-08-12 21:23:03 GitaarLAB

我不知道，謝謝！這個問題已經困擾我很多年了。 – wezternator 2012-08-12 21:59:31

修改外部CSS值

回答

相關問題