獲取元素的值一次，然後保持該值靜態

Question

我使用

function expand(btn) { 
var box = btn.parentNode.parentNode, 
    ipsum = box.getElementsByTagName("p")[0], 
    textSize = window.getComputedStyle(ipsum, null).getPropertyValue('font-size'), 
    lineHeight = window.getComputedStyle(ipsum, null).getPropertyValue('line-height'), 
    boxWidth = window.getComputedStyle(box, null).getPropertyValue('width'), 
    initialHeight = window.getComputedStyle(box, null).getPropertyValue('height'), 
    numText = parseInt(textSize), 
    numWidth = parseInt(boxWidth), 
    numHeight= parseInt(initialHeight); 


if(box.style.height == "150px"){ 
    box.style.height = "40px"; 
    ipsum.style = "display:none"; 
} 
else{ 
    box.style.height = "150px"; 
    ipsum.style = "display:inline"; 
} 
console.log(lineHeight); 
} 

獲取元素的唯一問題是，元件高度頻繁變化的初始高度值，但所獲得的第一個值始終正確如何獲得初始值並保持靜態？ 我如何只存儲變量中的值一次，我需要它在一個變量做計算，但隨着價值不斷變化我得到錯誤的數字輸出。

Answer 1

可重構功能將initialHeight存儲在一個 「私」 變量第一次它的運行：

var expand = (function() { 

    var initialHeight; 

    // Return a function that holds initialHeight in a closure 
    return function (btn) { 

     // Get box before setting/getting initialHeight 
     var box = btn.parentNode.parentNode; 

     // Set initialHeight only if undefined 
     initialHeight = initialHeight || window.getComputedStyle(box, null).getPropertyValue('height'); 

     // Do other variables 
     var ipsum = box.getElementsByTagName("p")[0], 
      textSize = window.getComputedStyle(ipsum, null).getPropertyValue('font-size'), 
      lineHeight = window.getComputedStyle(ipsum, null).getPropertyValue('line-height'), 
      boxWidth = window.getComputedStyle(box, null).getPropertyValue('width'), 
      numText = parseInt(textSize), 
      numWidth = parseInt(boxWidth), 
      numHeight= parseInt(initialHeight); 

     if(box.style.height == "150px"){ 
     box.style.height = "40px"; 
     ipsum.style.display = "none"; 

     } else { 
     box.style.height = "150px"; 

     // If ipsum is a P, probably better to use "" (empty string) here 
     // so it returns to its default or inherited value 
     // ipsum.style.display = "inline"; 
     ipsum.style.display = ""; 
     } 

     console.log(lineHeight); 
    } 
}()); 

以上是一個適當的重構，用以下標記進行測試：

<style type="text/css"> 
#box {border: 1px solid blue;} 
#notBox {border: 1px solid red;} 
#ipsum {border: 1px solid yellow;} 
</style> 
<div id="box">box 
    <div id="notBox">notBox 
    <input type="button" onclick="expand(this)" value="Expand&hellip;"> 
    <p id="ipsum">ipsum</p> 
    </div> 
</div> 

Answer 2

每次執行功能expand時，都會爲initialHeight獲得一個新值。 所有你需要的是將它記錄在一個閉包中，如果你有超過1個btn來處理的話就用散列表示，如果你想爲每個btn記錄多個高度，就用數組賦值。就像這樣：

// predefine the function expand for furthre usage. 
var expand; 
(function() { 
    /* 
    having arrays as value, indexed like this: 
    { 
     <btn_1_id> : [<firstHeight>, <2nd Height>, ...], 
     <btn_2_id> : [], 
     ... 
    } 
    */ 
    // Let's assume every btn is having an id. You may think another way yourself it they don't. 
    var initialHeightForMultiBtns = {}; 
    expand = function(btn) { 
     // ...blablabla 
     initialHeightForMultiBtns[btn.id] = initialHeightForMultiBtns[btn.id] || []; 
     initialHeightForMultiBtns[btn.id].push(window.getComputedStyle(box, null).getPropertyValue('height')); 

     console.log(initialHeightForMultiBtns[btn.id][0]); // the real initialized height for the given btn. 
     // ...blablabla 
    } 
})() 

expand(btn_1); // let's expand btn_1 here. 

祝你好運。

Answer 3

你可以將它設置爲屬性嗎？喜歡的東西：

// set the value once some place 
box.setAttribute('data-init-height', window.getComputedStyle(…)…); 

// when setting the initial height, check for the attribute first 
initialHeight = box.getAttribute('data-init-height') || window.getComputedStyle(…)…; 

---

後續： see fiddle