我正在尝试为弹性 div 实现简单的折叠/展开效果，即当元素的实际尺寸未通过 CSS 设置时，因此无法简单地确定。所以对于任意元素，我需要 jQuery 的 width() 和 height() 等价物；这些方法应返回可分配给 *.style.width/height 的内容以实现折叠/展开效果。这些方法也可以是 setter，尽管不一定，因为它无论如何都是微不足道的(或者不是吗？)

兼容性:IE8+ 和 3 个合适的组合:Firefox、Chrome、Safari。所以。除了我现在不想做的“使用 jQuery”之外，没有其他答案。问题是我不需要支持 IE6/7 和 Netscape 等过时的浏览器。我希望我的代码只是简单的、适合现代浏览器的初级 JavaScript。为 IE9 放弃 IE8 也是一种选择。

我认为答案可能对许多网络开发人员有用。谢谢!

编辑:我当然明白，分析 jQuery(并放弃陈旧的怪癖)是一个不错的选择，但我认为有人已经这样做了并且可以与我们分享。

最佳答案

这是我今天在使用 IE8、FF、Chrome 和 Safari 后提出的问题的答案。

假设我们想要垂直折叠和展开一个 div 元素(因此为简单起见，我们将只讨论高度)，使用尽可能少的 JavaScript 且不使用 jQuery。可能是您希望在页面上很好地显示和隐藏的内联错误消息框。消息框本身是有弹性的，您不知道它的实际尺寸。这里有两个一般性问题需要解决:

问题 #1:众所周知，offsetHeight、clientHeight 和 scrollHeight 属性在浏览器之间不一致。你不能依赖它们，尤其是当 margin/padding/border 设置为 0 以外的值时，以及 CSS 高度不是默认值时(即实际折叠/展开元素时)。有 getComputedStyle()，但它只能在健全的浏览器上使用，而不能在 IE 中使用。 OTOH，IE 的 currentStyle 属性不会像您预期的那样返回计算值(例如，您可能会看到“auto”作为高度值)。事实证明，没有边距/填充/边框的 offsetHeight 在所有现代浏览器上都是可靠和兼容的。

问题 #2:(据我所知)使您的 div 元素具有动画效果的唯一方法是更改​​ style.height，但是，它不包括填充和边框，因此您无法使框向下动画到 0 或从 0 开始你的动画对于具有非零填充和边框的元素。 (最重要的是，IE 不接受 0px 作为 style.height，所以最小尺寸无论如何都是 1px)。

这两个问题的解决方案是用另一个具有默认样式的 div 包裹你的盒子，即 padding/margin/border 都设置为 0，这是新 div 的默认样式。您要折叠和展开的框应该在里面并且它不应该有边距设置，如果需要的话只有填充和边框。这样，您将能够 (1) 通过 offsetHeight 可靠地确定弹性内盒的高度，以及 (2) 将外盒的高度动画化为 1 像素或从 1 像素变化。

那么，假设我们想要制作动画:

<div id="errmsg" style="display:none">
    <div class="errmsg">
        <div class="window-close" onClick="javascript:showErrMsg('', this.parentNode.parentNode)"></div>
        <div id="errmsg.text"></div>
    </div>
</div>

盒子一开始是不可见的。 “window-close”类是右侧带有十字的小框，用于在单击时隐藏该框。使用空字符串调用 showErrMsg() 会折叠消息框(见下文)。

我为这个错误消息框设置动画的 JavaScript 代码如下(我还设置了不透明度的动画，为简单起见此处省略):

var ANIMATE_STEPS = 10;
var ANIMATE_DELAY = 20;


function _obj(obj, parent)
{
    if (typeof obj == 'string')
        obj = (parent ? parent : document).getElementById(obj);
    return obj;
}

function _setStyleHeight(obj, h)
{
    _obj(obj).style.height = Math.round(h) + 'px';
}

function _animateVertFold(obj, cur, by, lim)
{
    obj = _obj(obj);
    cur += by;
    if (by < 0 && cur <= 1)
    {
        obj.style.display = 'none';
        _setStyleHeight(obj, 1); // IE doesn't accept 0
    }
    else if (by > 0 && cur >= lim)
    {
        _setStyleHeight(obj, lim);
    }
    else
    {
        _setStyleHeight(obj, cur);
        setTimeout('_animateVertFold(\'' + obj.id + '\', ' +
            cur + ', ' + by + ', ' + lim + ')', ANIMATE_DELAY);
    }
}

function _expandElem(obj)
{
    obj = _obj(obj);
    if (obj.style.display == 'none')
    {
        obj.style.overflow = 'hidden';
        _setStyleHeight(obj, 1);
        obj.style.display = 'block';
        var innerDiv = obj.getElementsByTagName('div')[0]; // better way?
        var h = innerDiv.offsetHeight;
        if (h > 0)
            _animateVertFold(obj, obj.offsetHeight, h /  ANIMATE_STEPS, h);
    }
}

function _shrinkElem(obj)
{
    obj = _obj(obj);
    if (!obj.style.display || obj.style.display != 'none')
    {
        obj.style.display = 'block';
        obj.style.overflow = 'hidden';
        var h = obj.offsetHeight;
        _animateVertFold(obj, h, - h /  ANIMATE_STEPS, h);
    }
}


function showErrMsg(msg, id)
{
    id || (id = '_errmsg');
    obj = _obj(id);
    if (msg != '')
    {
        _obj(id + '.text').innerHTML = msg;
        _expandElem(obj);
    }
    else
        _shrinkElem(obj);
}

您可以调用 showErrMsg()，代码会处理剩下的事情。您必须将窗口关闭类定义为模仿 GUI 关闭窗口按钮的东西。当然，“errmsg”类作为一个框，具有不同的背景颜色、边框和可能的字体。

关于height - 没有 jQuery 的现代浏览器的 width() 和 height()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3955052/