没有jQuery的现代浏览器的宽度()和高度()
我正在尝试为弹性div实现一个简单的折叠/解开效果，即当元素的实际尺寸不是通过CSS设置的，因此不是可以确定的。因此，对于任意元素，我需要jQuery的width()和height()等效项；这些方法应该返回一些可以赋值给*.style.width/height的内容，以实现折叠/展开效果。这些方法也可以是setter，尽管不一定是微不足道的(或者不是？)
兼容性: IE8+和3个合适的组合:火狐、Chrome、Safari。除了“使用jQuery”之外，S.O.对此没有答案，我目前不想这么做。问题是我不需要支持像IE6/7和Netscape这样的老式浏览器。我希望我的代码是简单的，现代浏览器的处女作JavaScript。删除IE9的IE8也是一种选择。
我认为这个答案可能会对许多web开发人员有用。谢谢!
编辑:当然，我理解，分析jQuery (并删除过时的怪癖)是一个很好的选择，但我认为已经有人做了这件事，可以与我们分享。
回答 4
Stack Overflow用户
发布于 2010-10-18 22:52:13
这是我今天在玩了IE8，FF，Chrome和Safari后想出的问题的答案。
假设我们想要垂直折叠和展开一个div元素(所以为了简单起见，我们只讨论高度)，使用最小可能的JavaScript而不是jQuery。可能是您希望在页面上很好地显示和隐藏的内联错误消息框。消息框本身是有弹性的，您不知道它的实际尺寸。这里有两个需要解决的一般问题：
问题#1:众所周知，offsetHeight、clientHeight和scrollHeight属性在不同浏览器之间不一致。你不能依赖它们，特别是当边距/填充/边框被设置为非0的时候，当CSS的高度不是默认的时候(例如，当实际折叠/展开元素时)。有getComputedStyle()，但它只在正常的浏览器上可用，在IE中不可用。IE的currentStyle属性不会像你期望的那样返回计算值(例如，你可能会看到"auto“作为高度值)。事实证明，没有空白/填充/边框的offsetHeight是可靠的，并且在所有现代浏览器上都是兼容的。
问题#2:唯一的方法(据我所知)来动画你的div元素是改变style.height，然而，这不包括填充和边框，因此你不能动画框下降到0或从0开始你的动画元素的非零填充和边框。(最重要的是，IE不接受0px作为style.height，所以最小尺寸应该是1px )。
这两个问题的解决方案都是用另一个默认样式的div来包装您的框，即填充/边距/边框都设置为0，这是新div的默认样式。你想要折叠和展开的方框应该在里面，并且它不应该有边距设置，如果需要的话，只需要填充和边框。这样，您将能够(1)通过offsetHeight可靠地确定弹性内盒的高度，以及(2)将外盒的高度设置为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()，代码将负责其余的工作。您必须将window-close类定义为模拟GUI关闭窗口按钮的类。当然，"errmsg“类也是一个具有不同背景颜色、边框和字体的框。
Stack Overflow用户
发布于 2010-10-18 04:14:44
我认为这里最实用的方法是分析jQuery源代码并从那里构建函数。
Stack Overflow用户
发布于 2010-10-18 04:37:20
element.offsetHeight、element.offsetWidth在不同浏览器上的工作方式基本相同，都返回整数
element.clientWidth、element.clientHeight返回整数，但在x浏览器中有一些差异(填充、边框宽度)
浏览器的currentStyle或计算样式返回字符串，它们可能是像素、em、百分比-很难操纵x-browser。
https://stackoverflow.com/questions/3955052
复制相似问题
腾讯云开发者
