How to get the width and unit (%, rem, em, vw etc) of an element in JS / jQuery?

Question

I'm writing a jQuery plugin and I want to wrap a textarea element (whose width could be defined in any unit) inside a div element and apply the original element's width and unit to the new parent. The pixel width is not useful, because I want the whole thing to be responsive.

<style>
  #target {
    width: 90%; /* 10rem, 80vw etc */
  }
</style>
<script>
  $(function(){
    let container=$('<div>');
    container.width(???); // make container's width whatever width and unit the textarea was in css - in this case 90%
    $('#target').wrap(container).css('width','100%');
  });
</script>

<textarea id="target"></textarea>

Expected result:

<div style="width: 90%"> <!-- or whatever width and unit was in the css -->
  <textarea id="target" style="width: 100%"></textarea>
</div>

Obviously it would be easy to get the exact pixel value with outerWidth() or window.getComputedStyle, but that wouldn't be responsive.

Edit: Looks like this has been answered here already. It's possible, but only in Blink browsers for the time being.

@AHaworth I could do it, but simulating the "responsiveness" on resize would be my last resort. I wanted to know first if there might be some other more clever ways. — dj50, Oct 25 '22 at 10:53
You can find the jquery equivilent of the javascript ‘const rect = target.getBoundingClientRect()’ which gives you the latest/current dimensions of the text area, then use ‘rect.width’ to get the width. You could always wrap your function there inside a $(’#target’).on(‘input’… function so it updates as the user is typing in the textarea — TuxedoedCastle, Oct 25 '22 at 12:39
I don’t now understand what is required. If you write 90% into the width of the parent div then the width of the text area will become 90% of that 90%. Why would that ever be reupquired? — A Haworth, Oct 25 '22 at 14:41
@AHaworth I need to get the width and the unit of that width (be it px, percentage, rem, em, vh, vw etc) of an element so I can apply to another element. — dj50, Oct 25 '22 at 20:53

score 0 · Answer 1 · answered Oct 25 '22 at 13:19

0

$(function () {
    $('#target').wrap('<div id="container">'); // wrap the target in a div
    var containerWidth = $("#target").width() / $('#target').parent().width() * 100; //get width as a percentage
    containerWidth = Math.ceil(containerWidth); //round up to nearest whole number
    $("#container").css('width', containerWidth + '%'); //set the width of the container
});

If it has to be responsive send me a comment.

answered Oct 25 '22 at 13:19

Mo D Genesis

5,187
1
21
32

Thank you for the effort, but what I basically need is to get the width and the unit of an element so I can apply it to another element. The unit might be px, percentage, rem, em, vw, vh or whatever. – dj50 Oct 25 '22 at 20:21
Is it possible for you to apply a css class to two elements? e.g. .bg-color { background-color: red;} Then do

If Not can you get the width through the style or do you have to get it through the javascript element?
– Mo D Genesis Oct 26 '22 at 09:28

How to get the width and unit (%, rem, em, vw etc) of an element in JS / jQuery?

1 Answers1