When an element is styled with CSS visibility: hidden, its width can still be measured. It is only when the element is styled with display: none that it is completely removed from the rendering. If you know for sure that the elements will be positioned absolutely to avoid layout changes when displayed, you can simply use css('visibility', 'hidden') to hide the element instead of using hide(). This will allow you to measure the width without any issues.

Alternatively, the show-measure-hide method can also be effective in certain situations.

If you need to determine the outer width of an element within a hidden container, you can utilize the following function:

$.fn.getHiddenOffsetWidth = function () {
    // Create a clone of the element for measurement
    var $hiddenElement = $(this).clone().appendTo('body');

    // Calculate the width of the clone
    var width = $hiddenElement.outerWidth();

    // Remove the clone from the DOM
    $hiddenElement.remove();

    return width;
};

If you need to use .offsetWidth() instead of .outerWidth(), you can make that adjustment accordingly.

This function essentially clones the element, places it in a visible location for measurement, obtains the offset width, and then removes the clone. Here is an example where this function would be suitable:

<style>
    .container-inner {
        display: none;
    }

    .measure-me {
        width: 120px;
    }
</style>

<div class="container-outer">
    <div class="container-inner">
        <div class="measure-me"></div>
    </div>
</div>

It is important to note that if the element has CSS that directly affects its width which won't apply if it's a direct child of the body, this method may not be effective. For instance:

.container-outer .measure-me {
    width: 100px;
}

In such cases, you may need to adjust the CSS specificity or change the appendTo() to ensure the clone inherits the necessary styles. Additionally, if the element itself has display:none, you can modify the function to make the clone visible before measuring its width:

$.fn.getHiddenOffsetWidth = function () {
    var hiddenElement = $(this);
    var width = 0;

    // Make the element visible temporarily
    hiddenElement.show();

    // Calculate the width of the element
    width = hiddenElement.outerWidth();

    // Hide the element again
    hiddenElement.hide();

    return width;
}

This function adjustment would be suitable in scenarios like the following:

<style>
    .measure-me {
        display: none;
        width: 120px;
    }
</style>

<div class="container">
    <div class="measure-me"></div>
</div>

Here are two options:

1. Move the element outside of the viewport (e.g. left:-10000px)
2. Use visibility: hidden or opacity: 0 instead of hide().

Both methods will hide the element while still allowing you to determine the computed width. Just be cautious with Safari, as it can be extremely fast – almost too fast at times...

Check out this amazing jQuery plugin!

How to use it:

console.log('Getting width without showing element: ' + $('#hidden').width());

console.log('Getting width with the element actually displayed: ' + $('#hidden').actual('width'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.actual/1.0.19/jquery.actual.min.js"></script>

<div style="width: 100px; display: none;">
  <div id="hidden"></div>
</div>

The method I used involved hiding an element and saving its width in its dataset. This approach will only be effective if you can programmatically hide elements.

For example:

When hiding an element:

var element = $("selectorOfElement");

element.dataset.originalWidth = element.clientWidth;

Later, when retrieving the width:

var element = $("selectorOfElement");

var originalWidth = element.dataset.originalWidth;

If you want the element to take up the full width of its parent element, you can use a recursive method like this:

Using ES5:

var calculateWidth;
calculateWidth = function($el){
  return $el.offsetWidth || calculateWidth($el.parentElement);
}
var elementWidth = calculateWidth(document.getElementById('the-element'));

Using ES6:

let calculateWidth
calculateWidth = ($el) => $el.offsetWidth || calculateWidth($el.parentElement)

const elementWidth = calculateWidth(document.getElementById('the-element'))

It's surprising that no one has proposed the following solution:

.hidden {
  overflow: hidden;
  height: 0;
}
.shown {
  overflow: visible;
  height: auto;
}

Alternative, less-than-ideal solutions:

• Using visibility: hidden is not ideal because the element still occupies space.
• Using

  position: absolute; left: -10000px

  is also not ideal as it may cause horizontal scrolling if not properly contained with overflow: hidden.
• Using .clone().appendTo('body') is a fragile workaround that is likely to break. Your responsive CSS must be scoped correctly for 2 separate places in the DOM. Your Javascript rendering logic must be timed correctly for this workaround. Keep in mind that server-side pre-rendering is often carried out in Node. :)

One reason for this behavior is that the element is hidden using display: none; In the past, I have used a workaround where I create a "receiver" div with absolute positioning to move the hidden element off the page. I then load the new element into the receiver, retrieve its dimensions, and finally remove it once I am finished - followed by removing the receiver as well.

Alternatively, you can avoid using hide(); and instead set visibility: hidden; display: ; However, be aware that with this method, the blank space will still be reserved in the layout wherever the node is attached.

 Let $hiddenComponent = $('#id_of_your_element').clone().css({ left: -10000, top: -10000, position: 'absolute', display: 'inline', visibility: 'visible' }).appendTo('body');
 var width = parseInt($hiddenComponent.outerWidth());
 $hiddenComponent.remove();

Attempting to discover a functioning method for handling hidden elements led me to the realization that CSS is more intricate than commonly believed. With the introduction of new layout techniques in CSS3 such as flexbox, grid, columns, and nested elements within complex parent elements, previous solutions may not be applicable.

Example of using flexbox

I believe the most sustainable and straightforward solution lies in real-time rendering. By doing so, the browser can provide the accurate size of the element.

Unfortunately, JavaScript does not offer a direct event to detect when an element is hidden or shown. Nonetheless, I have devised a function utilizing the DOM Attribute Modified API to trigger a callback function when the visibility of an element changes.

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

For further details, please visit my project on GitHub.

https://github.com/Soul-Master/visible.event.js

See a demonstration here: http://jsbin.com/ETiGIre/7

Apologies for joining the conversation late. I find it surprising that no one has brought up the use of getComputedStyle yet. If the CSS includes a width value, this method can be very helpful. First, identify the element:

let yourEle = document.getElementById('this-ele-id');

Then, apply the function like so:
getComputedStyle(yourEle).width

Keep in mind that this function returns a string, so you will need to extract the numbers from it. It is worth noting that this method still works even if the element's display style is set to none.

For more information on this topic, you can also check out this article on zellwk.com

Expanding on the solution provided by @jan-werkhoven for those working with Vue.js.

Vue allows us to create and utilize custom directives. The concept of setting height: 0px; and overflow: none; can be elegantly encapsulated within a directive.

Here is an example of implementing a custom v-collapse directive:

import { ObjectDirective } from "vue";

const vCollapseOriginalHeight = Symbol('_vod');
const vCollapseOriginalOverflow = Symbol('_voo');

type VCollapseElement = HTMLElement & {
    [vCollapseOriginalHeight]: string;
    [vCollapseOriginalOverflow]: string;
};

function setCollapse(element: VCollapseElement, value: boolean) {
    if (value) {
        element.style.height = '0px';
        element.style.overflow = 'hidden';
    } else {
        element.style.height = element[vCollapseOriginalHeight];
        element.style.overflow = element[vCollapseOriginalOverflow];
    }
}

export const vCollapse: ObjectDirective<VCollapseElement> = {
    beforeMount(el, { value }) {
        el[vCollapseOriginalHeight] = el.style.height;
        el[vCollapseOriginalOverflow] = el.style.overflow;

        setCollapse(el, value);
    },

    updated(el, { value, oldValue }) {
        if (!value === !oldValue) return;

        setCollapse(el, value);
    },

    beforeUnmount(el, { value }) {
        setCollapse(el, value);
    }
};

Global registration:

import { vCollapse } from './directives/collapse.ts';

createApp(App)
  .directive('collapse', vCollapse)
  .mount('#app');

Example of usage:

<script setup lang="ts">
const fooCollapsed = ref(true);
const barCollapsed = ref(false);
</script>
<template>
   <div>
       <foo v-collapse="fooCollapsed" />
       <bar v-collapse="barCollapsed" />
   <div>
<template>

Things to beware of:
If a parent element utilizes the CSS gap property, it may introduce some unintended height to collapsed elements.