How can I figure out what size an HTML Element will be? (tween size as element added)

Related searches

I'm pretty sure this is currently infeasable.

I have an animation that involves an element moving from an absolute position to an inline one. For reasons, I can not know how the container is sized, nor how the element I'm animating is sized.

What I need to know is what the size of the HTML Element will be after the transformation, without any jittery drawing.

This makes the problem very difficult (likely undoable) because I have no way to know if adding the element will resize the parent, or resize the element itself.

What I need is a means of looking into the future.

const byId = (id) => document.getElementById(id);
#container {
  height: 3em;
  min-width: 50%;
  background: teal;

#mystery {
  background: purple;
<div id="container">
  <div id="mystery">Some Text</div>

<button onClick='byId("mystery").style.position = "relative"'>Position Relative</button>
<button onClick='byId("mystery").style.position = "absolute"'>Position Absolute</button>

You can simply change the property, measure the sizes you want and then change the property back. JS is fast enough to do it all between renderings, as long as you keep it all in the same thread. Have you tried that at all?

Asker Edit: Here's the code to prove it works.

function byId(id){ return document.getElementById(id); }
const tweenyEl = byId("tweeny");

function appendTweeny() { = "1";
  const startingWidth = tweenyEl.clientWidth + "px" = "relative";
  const targetWidth = tweenyEl.clientWidth + "px";
  console.log(startingWidth, targetWidth); = startingWidth;
  requestAnimationFrame(() => 
    requestAnimationFrame(() => = targetWidth

function resetTweeny() { = ""; = ""; = "0.1";
#container {
  display: inline-block;
  height: 3em;
  min-width: 150px;
  background: teal;

#tweeny {
  font-family: arial;
  color: white;
  position: absolute;
  background: purple;
  transition: all 0.5s ease;
  opacity: 0.1;
<div id="container">
  <div id="tweeny">I'm Tweeny</div>

<button onClick='appendTweeny()'>Append Tweeny</button>
<button onClick='resetTweeny()'>Reset Tweeny</button>

Determining the dimensions of elements, If you want to set the width and height of an element, use width and height or the Fran�ais � 日本語 � 한국어 � 中文 (简体) � 正體中文 (繁體) � Add a translation (if any), padding, and border, you want to use the HTMLElement. If you need to know the actual size of the content, regardless of how much of it� Definition and Usage. The length property returns the number of nodes in a NodeList object. A Node object's collection of child nodes is an example of a NodeList object.

I would suggest cloning the page into an iframe and then positioning the iframe off the screen.

<iframe style="width:100vw;height:100vh;left:-101vw;positionabsolute"><iframe> 

Sizing items in CSS, HTML Elements have a natural size, set before they are affected by any CSS. If you add a <div> to your HTML with no content, then give it a border as we did with Note: Find out more about responsive image techniques. The figure element will remove the need for the somewhat silly image class. Definite improvement for quotes too. It does impose some extra difficulties with wysiwyg editors and such, as I would suggest using the figure element for every image that could have a caption (future-proof coding and such!). Love it!

Also bear in mind that the user can zoom in-and-out at will! Different browsers might render the same thing in different ways. You really don't know how big an element will be until it does so.

I don't know if you can get anywhere by specifying display: none; ... whether or not the browser would bother to make these calculations for an object that isn't visible.

.animate(), version added: 1.0.animate( properties [, duration ] [, easing ] [, complete ] ) A string or number determining how long the animation will run. A function to be called when the animation on an element fails to complete (its Promise Or, if you want to animate font size, you would use fontSize or the CSS <!doctype html>. The easiest way to modify the content of an HTML element is by using the innerHTML property. To change the content of an HTML element, use this syntax: document.getElementById( id ).innerHTML = new HTML

You can clone on the fly an element with same transformation with delay 0 and then calculate it's width and height, then do what you want with your actual element it's still animating

How to work with classic tween animation in Animate, To add content to the first frame Modify the item's size, rotation,� That can be a pain, but you can usually find the offending element by surfing around the ol’ DevTools and selecting elements until you find something that extends too far over to to the right (off-page to the left doesn’t tend to trigger a scrollbar the same way) and adjusting it.

Velocity.js, Note that you can offset Velocity's file size by custom-building jQuery without its effects You can either pass in the name of a packaged easing (e.g. "ease-out" or The utility of passing in the tween animation property is that it allows you to (instead of to the edge of an element), simply target the html element and use a � Padding and border are added on top of whatever work can help you quickly figure out why the padding or margin of HTML elements is changing based on the parent element’s size, font size or

The innerHTML property can be used to examine the current HTML source of the page, including any changes that have been made since the page was initially loaded. Reading the HTML contents of an element. Reading innerHTML causes the user agent to serialize the HTML or XML fragment comprised of the element's descendants. The resulting string is

The <aside> element is used to identify content that is related to the primary content of the webpage, but does not constitute the primary content of the page. Author information, related links, related content, and advertisements are exampes of content that may be found in an aside element.

  • What's the goal of knowing the sizes? I just take a shot, maybe it's solvable without knowing the sizes?
  • I have not tried that, and I think it might actually work. Can you think of any way to increase the likelihood of not getting a rerender mid swap check? Any way of forcing animation frames not not happen at all? I know alert() does it, but that's no good.
  • I could maybe do requestAnimationFrame() so I'd get the max amount of time between swap check and next frame.
  • Nah, just keep it all in the same thread. Keep it all in the same scope too, just to be double sure.
  • Works like a charm.
  • It'll calculate visibility: hidden but not display: none
  • I'd have to clone the entire page due to flex sizing of parent containers. Is there a special clone function which might get around this?