I'm trying to set, with javascript, the width of one div to the width of another. In my case, the second div was cloned from the first.

The issue I'm running into is related to padding, and how style.width is defined differently from clientWidth/offsetWidth/scrollWidth. In my example below, I have two divs defined the same except with different widths. When the button is pressed, I'm trying to set the width of the smaller one to the bigger one - but the oute is that it gets the width of the bigger one PLUS the padding (an extra 20px).

Is there a way to change the line:

two.style.width = one.clientWidth + 'px';

to make the two divs equal in width?

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  two.style.width = one.clientWidth + 'px';
}

.outer {
  background: red;
  padding: 10px;
  } 
.inner {
  background: green;
  height: 10px;
  } 

#one {
  width: 100px; 
}
#two {
  width:50px;
    }

<div id=one class=outer><div class=inner></div></div>
<br>
<div id=two class=outer><div class=inner></div></div>
<button onclick="setWidth()">SET WIDTH</button>

I'm trying to set, with javascript, the width of one div to the width of another. In my case, the second div was cloned from the first.

The issue I'm running into is related to padding, and how style.width is defined differently from clientWidth/offsetWidth/scrollWidth. In my example below, I have two divs defined the same except with different widths. When the button is pressed, I'm trying to set the width of the smaller one to the bigger one - but the oute is that it gets the width of the bigger one PLUS the padding (an extra 20px).

Is there a way to change the line:

two.style.width = one.clientWidth + 'px';

to make the two divs equal in width?

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  two.style.width = one.clientWidth + 'px';
}

.outer {
  background: red;
  padding: 10px;
  } 
.inner {
  background: green;
  height: 10px;
  } 

#one {
  width: 100px; 
}
#two {
  width:50px;
    }

<div id=one class=outer><div class=inner></div></div>
<br>
<div id=two class=outer><div class=inner></div></div>
<button onclick="setWidth()">SET WIDTH</button>

• javascript
• html
• css
• width

Share Improve this question Follow asked Jan 28, 2016 at 19:28 BrianBrian 2,25222 gold badges1616 silver badges2424 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can use getComputedStyle:

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  style = window.getComputedStyle(one);
  wdt = style.getPropertyValue('width');
  two.style.width = wdt;
}

Here's a fiddle

You should make use of .offsetWidth. They belong to the element, not .style.

function setWidth() {
    var w=document.getElementById('one').offsetWidth
    document.getElementById('two').setAttribute("style","width:"+w+"px");
}

The width isn't taking into account the padding. You'll still need to subtract it. Something like this should work:

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");

  two.style.width = one.offsetWidth  + 'px';

  //update the width again, subtracting the difference between the first div and the second (which includes padding)
  two.style.width = (two.offsetWidth-((two.offsetWidth - one.offsetWidth)*2))  + 'px';
}

You can see it working here: https://jsfiddle/igor_9000/55d1pfak/1/

For what its worth, jQuery handles this a little easier and gets the elements width including padding/borders. That may be another option for you.

Hope that helps!

You need to take one's padding into consideration.

function setWidth() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var leftPadding = window.getComputedStyle(one, null).getPropertyValue('padding-left');
  var width = window.getComputedStyle(one, null).getPropertyValue('width');

  two.style.width = width;
  two.style.padding = leftPadding;
}

Here's a JSFiddle.

My code will find the largest width for all elements using class 'js-equal-width' and it will set all of them to the same width.

$(function() {
    const extraWidth = 50
    var maxWidth = 0
    $('.js-equal-width').each(function() {
        maxWidth = maxWidth > $(this).width() ? maxWidth : $(this).width()
    })

    $('.js-equal-width').each(function() {
        $(this).width(maxWidth + extraWidth)
    })
})

You can do it by using 'js-equal-width'

<div style="width: 300px;">
     <span class="js-equal-width">Midterm Examination</span>
     <span class="js-equal-width">Final Examination</span>
</div>