没有jQuery的现代浏览器的width()和height()

Question

我试图为弹性div实现一个简单的fold/unforld效果,即当元素的实际尺寸不是通过CSS设置时,因此不能轻易确定.所以我需要jQuery的width()和height()等价于任意元素; 方法应返回可分配给*.style.width/height的内容,以实现折叠/展开效果.这些方法也可以是设置者,但不一定是因为它无关紧要(或者不是吗？)

兼容性:IE8 +和3个适当的团队:Firefox,Chrome,Safari.除了"使用jQuery"之外,SO没有其他答案,我现在不想这样做.问题是我不需要支持像IE6/7和Netscape这样的古老浏览器.我希望我的代码只是简单的,适用于现代浏览器的首页JavaScript.删除IE9 for IE9也是一种选择.

我认为答案可能对许多Web开发人员有用.谢谢!

编辑:我当然理解,分析jQuery(以及丢弃古老的怪癖)是一个不错的选择,但我认为有人已经这样做并且可以与我们分享.

Answer 1

这是我在玩IE8,FF,Chrome和Safari之后今天提出的问题的答案.

假设我们想要垂直折叠和展开div元素(所以我们只是简单地谈论高度),尽可能少的JavaScript和没有jQuery.可以是要在页面上显示和隐藏的内联错误消息框.消息框本身是弹性的,您不知道它的实际尺寸.这里有两个一般问题需要解决:

问题#1:offsetHeight,clientHeight和scrollHeight属性在浏览器中出了名的不一致.您不能依赖它们,尤其是当margin/padding/border设置为0以外的值并且CSS高度不是默认值时(即实际折叠/展开元素时).有getComputedStyle(),但只能在理智的浏览器上使用,而不能在IE浏览器中使用.OTOH,IE的currentStyle属性不会像您期望的那样返回计算值(例如,您可能会将"auto"视为高度值).事实证明,没有边距/填充/边框偏移高度可靠且兼容所有现代浏览器.

问题#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>

这个盒子在开始时是不可见的."窗口关闭"类是右侧的一个小框,带有十字形,用于在单击时隐藏框.用空字符串调用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"类作为一个具有不同背景颜色,边框和可能的字体的框.