Getting element width as a percentage

Question

I have an input elements whose width is set as a percentage in css. All these elements have a common class 'display-class'

Eg.

input.test1 {
   width: 60%
}

Now in JS, I am trying to set a wrapper div to this element. I want the wrapper div to have the width of input field and set the width of input field to 100%

My current JS code looks like this -

document.querySelectorAll('.display-class').forEach((el) => {
    const wrap = document.createElement('div');
    wrap.classList.add('display-class-wrap');
    el.parentNode.insertBefore(wrap, el);
    wrap.appendChild(el);
    wrap.style.width = el.style.width;
    el.style.width = '100%';
});

When I try to log the width's of both elements, it returns me empty string for length of input element.

I also tried setting the width by calculating the percentage myself like so,

wrap.style.width = `${(el.clientWidth/wrap.parentElement.clientWidth)*100}%`;

But it returns me width in float values that are way off the original width set. Eg. It returned 55.925% for 60%

Snippet:

const initialHtml = initial.outerHTML;

function reset() {
  initial.outerHTML = initialHtml;
}

function wrapElements1() {
  document.querySelectorAll('.display-class').forEach((el) => {
      const wrap = document.createElement('div');
      wrap.classList.add('display-class-wrap');
      el.parentNode.insertBefore(wrap, el);
      wrap.appendChild(el);
      wrap.style.width = el.style.width;
      el.style.width = '100%';
  });
}

function wrapElements2() {
  document.querySelectorAll('.display-class').forEach((el) => {
      const wrap = document.createElement('div');
      wrap.classList.add('display-class-wrap');
      el.parentNode.insertBefore(wrap, el);
      wrap.appendChild(el);
      wrap.style.width = `${(el.clientWidth/wrap.parentElement.clientWidth)*100}%`;
      el.style.width = '100%';
  });
}

<style>
input.test1 {
   width: 60%
}

.display-class {
  border: 1px solid red;
}

.display-class-wrap {
  border: 1px dashed orange;
}
</style>

<body>
  <button type="button" onclick="wrapElements1()">Wrap 1</button>
  <button type="button" onclick="wrapElements2()">Wrap 2</button>
  <button type="button" onclick="reset()">Reset</button>

  <div id="initial">
    <input class="display-class test1" name="input-1" type="text" />

    <input class="display-class test1" name="input-2" type="text" />
  </div>
</body>

Answer was marked as 'already answered', but this still doesnot solve my doubt. I need the exact percentage value set in css. getComputedStyle() returns me a value in px, from which even if I calculate the percentage myself, it's way off from the actual percentage

score 0 · Answer 1 · answered Aug 28 '23 at 05:55

You should use the .offsetWidth directly on the element. style will not return the width until the width is explicitly set on the element.

But the gotcha around the offsetWidth is that it can return 0 if you do certain DOM modifications use setTimeout for those scenarios.

Another option for you is to use getComputedStyle. Checkout the documentation on how to use it.

If you can create a codeSandbox I can look into it as well :). I hope this helps

Getting element width as a percentage

1 Answers1