div调整大小后如何检测html div的宽度和高度

Question

I am working with two divs where, one in the left is a collapsible container and the one in the right is a main container, something like this:

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

I am collapsing div 1 using simple css class and when div 1 is not visible, div 2 expands in size and takes over rest of the space. Now I need to get the size of the div 2 once it is done with the resizing (which is not instant and it is using transition).

I want to render d3 stuff in div 2 and need to to know the correct dimension of the div. Unfortunately,

$("#div2-id").width()

is returning undefined result. I think it is mainly due to the transition. How can I get correct width and height of the div after resizing is done?

Answer 1

I'd try using a timeout with the duration of the transition.

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

The delay is in milliseconds, so this assumes your CSS transition is 2s .

Answer 2

Read this post as I believe is a more accurate approach, as you fire an event as soon as the transition ends. Callback when CSS3 transition finishes

Answer 3

The transitionend Event

There is an event called transitionend. Adding a handler to this event will trigger any action after your transition ends instead of using a delay function

example click on the div box that has the text "left" inside.. when the transition ends the width of the div box that has the text "right" will pop up

 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); 

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

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

Note Beware

this event is only supported browser versions here http://www.w3schools.com/jsref/event_transitionend.asp