javascript - 通用 javascript 调整大小函数

标签 javascript css resize external parseint

基本上这个函数是为了存储调用它的元素的高度值,然后如果该高度与该元素匹配,它将其高度扩展 200px,如果它与存储的值不匹配,它将恢复该值(本质上缩小元素容器)。我如何让它从外部样式表读取以获取 var heightVal = parseInt(boxStyle.height);

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;
  }

}

最佳答案

这是我修改后的答案...此代码允许普遍使用该函数来调整任何元素的高度,无论您是希望它开始最小化还是最大化和/或您是否希望它展开或折叠.我开发这个功能是为了改进我之前写的答案。这实际上是我一直致力于更改 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;
  }
}

关于javascript - 通用 javascript 调整大小函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9073345/

相关文章:

javascript - 使用 PhantomJS 将 CSS3 动画渲染为图像文件序列

html - 为容器设置 CSS 渐变

java - 缓慢/跳跃地调整大小

html - 网站样式 - 图像的一部分在调整大小之前不会显示

c - 为什么“恢复”、“最小化”、“最大化”通知在不应该发送的情况下都被发送了?

javascript - Vuex 不对复杂对象使用react

javascript - jQuery。禁用 DateTimePicker 中的 minDate

html - 生成显示: none automatically的类css

javascript - Owl Carousel jquery插件autoHeight : true has no effect

javascript - 如果文本框中的值大于 1,则更改为复数