通用javascript調整大小功能

基本上這個函數是爲了存儲調用它的元素的高度值，然後如果該高度匹配元素，它將其高度增加200px，如果它不匹配存儲的值，它會恢復值（本質上是縮小元素容器）。我如何從外部樣式表中讀取var heightVal = parseInt(boxStyle.height);？通用javascript調整大小功能

function expand(e){ 
    var box = document.getElementById(e); 
    var boxStyle = box.style; 
    var heightVal = parseInt(boxStyle.height); 

    if(boxStyle.height == heightVal){ 
    boxStyle.height = heightVal + 200 +'px'; 
    } 
    else{ 
    boxStyle.height = heightVal; 
    } 

}

來源

2012-01-31 person0

爲什麼['offsetHeight']（https://developer.mozilla.org/en/DOM:element.offsetHeight）無效？ – 2012-01-31 01:39:31

我剛剛嘗試過，但我仍在摸索扭曲，所以我會回頭討論這個... 問題在於，每次使用該函數時都會更改'offsetHeight'值，因此元素的高度一直在增長。 – person0 2012-01-31 01:54:45

文檔有一個[styleSheets]（https://developer.mozilla.org/en/DOM/document.styleSheets）集合，每個工作表都有規則，每個規則都有與之相關的文本。您可以找到適當的規則，然後閱讀必須解析的關聯文本以查找所需的屬性及其關聯值。 – RobG 2012-01-31 02:14:17

這是我的修訂答案......這代碼允許被普遍使用重新大小的任何元素的高度，無論你是否希望它開始時最小化或最大化和/或您是否希望它的功能擴大或崩潰。我開發了這個函數，作爲對我之前編寫的答案的改進。這實際上是另一個函數的結果，我一直致力於改變CSS類以允許動畫而不使用javascript或jquery。我現在有兩個功能工作和通用！

參數非常直接... box表示要調整大小的元素，hNew表示要調整大小的高度（可以大於或小於元素的當前高度，並且該函數仍然有效）。

function resize_height(box, hNew){ 
    if(box.style.height != hNew || box.style.height == box.old_height){ 
    box.old_height = box.style.height 
    box.style.height = hNew; 
    } 
    else{ 
    box.style.height = box.old_height; 
    } 
}

來源

2012-01-31 17:44:52 person0

通用javascript調整大小功能

回答

相關問題