通用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调整大小功能

回答

相关问题