Question

I need to know if it is possible to make the heightVal variable of this code snippet act universally. Meaning I need it to access the height of whatever element I pass in as the box parameter and store it so that it can be used to reset the element to its original height. Using the offsetHeight property has not worked for me because the value is automatically reset when the function is accessed for the second time. (I am trying to make this function universally applicable to any element).

function expand(box){
  var heightVal = document.styleSheets[0].cssRules[3].style.height;

  if(box.style.height != "20px"){
    box.style.height = "20px";
  }
  else{
    box.style.height = heightVal;
  }
}

Answer 1

Why don’t you store it as an attribute on the DOM node?

Instead of doing var heightVal =, do box.my_height =. Or you can even use the HTML5 data-XXX attributes if you really don’t like it being in JS only.

function expand(box){
  if(box.style.height != "20px"){
    box.my_old_height = box.style.height;
    box.style.height = "20px";
  }
  else{
    box.style.height = box.my_old_height;
  }
}