一旦div调整大小，如何检测html div的宽度和高度

Question

我正在使用两个div，其中左边的一个是可折叠的容器，右边的一个是主容器，如下所示：

================================
|        |                     |
|        |                     |
|        |                     |
|  div 1 |         div 2       | 
|        |                     |
|        |                     | 
================================

我正在使用简单的css类折叠div 1，当div 1不可见时，div 2的大小会扩大并占用剩余的空间。现在我需要在调整大小时完成div 2的大小（这不是即时的，而是使用转换）。

我想在div 2中渲染d3的东西，并且需要知道div的正确尺寸。不幸的是，

$（＆＃34;＃div2-id＆＃34;）。width（）

返回未定义的结果。我认为这主要是由于过渡。调整大小后如何才能获得div的正确宽度和高度？

Answer 1

我会尝试在转换的持续时间内使用超时。

var delay = 2000;
var t = setTimeout(function(){
    var width = $("#div2-id").width();
    clearTimeout(t);
}, delay);

delay以毫秒为单位，因此假设您的CSS转换为2s。

Answer 2

阅读这篇文章，因为我认为这是一种更准确的方法，因为您在转换结束后立即触发事件。 Callback when CSS3 transition finishes

Answer 3

过渡期事件

有一个名为transitionend的事件。为此事件添加处理程序将触发转换结束后的任何操作，而不是使用延迟函数

示例单击包含文本＆＃34; left＆＃34;的div框。 inside ...当转换结束div文件的宽度时，文本＆＃34;右＆＃34;会弹出

＆＃13;

＆＃13;

function handler(){
if(window.getComputedStyle){
alert(window.getComputedStyle(document.getElementById('right'), 'width').width)
}
else {document.getElementById('right').currentStyle.width}
}
function click(){
document.getElementById('left').style.width='0px'

}

document.getElementById('left').addEventListener("transitionend",handler);
document.getElementById('left').addEventListener('click',click,false);

＆＃13;

#left{
  float:left;
  transition-property:width;
  transition-duration:3s;
  border:solid;
  width:100px;
  
}
#right{
  border:solid;
  overflow:hidden;
}

＆＃13;

<div>
<div id="left">
left
</div>
<div id="right">
ddd
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意小心

此事件仅支持此处的浏览器版本http://www.w3schools.com/jsref/event_transitionend.asp