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

您可以将其设为属性吗？类似的东西：

// 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

Answer 3

每次执行函数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.

祝你好运。

获取元素的值，然后保持该值静态

3 个答案: