JS clientWidth and CSS width

It is not easy to get clearness about the relation between JavaScript and CSS properties. Best is to write a test page and try it out. Exactly this I did here to study the JS properties clientWidth and offsetWidth, and some other properties around element dimensions, and how CSS width, padding, border and margin influence them. (Please mind that I do not cover the CSS box-sizing property here!)

• clientWidth and clientHeight include padding, but exclude border, whereby both will be zero and ignored on inline elements
• offsetWidth and offsetHeight include both padding and border, and is always identical with getBoundingClientRect()
• neither includes margin
• clientTop and clientLeft give the border thickness
• offsetTop and offsetLeft give the pixel distances from page edges

All these JS properties in HTML element objects are read-only. When you want to set a width, you need to do it via CSS:

    var element = document.getElementById("myElement");
    alert("clientWidth = "+element.clientWidth);

    element.style.width = 20+"px";
    alert("clientWidth = "+element.clientWidth);

Here is something to play around. The small yellow-green test-DIV to be seen below is following HTML:

    <div style="border: 1px solid gray;">
      <div id="block-element" style="width: 60px; background-color: LightGreen; border: 0px solid green;">
        <span style="background-color: yellow;">DIV</span>
      </div>
    </div>

The outer DIV provides a gray border that makes margins visible. The input fields set their values upon the inner green DIV. It contains a yellow SPAN to make the inner paddings better visible.

Test View

width
height
margin
border-width
padding

clientWidth
offsetWidth
boundingClientRect.width
clientHeight
offsetHeight
boundingClientRect.height
clientTop
clientLeft
offsetTop
offsetLeft

DIV

You can input pixel sizes in the fields to the left. That will change the according CSS properties of the green DIV below. The display to the right shows how these CSS-properties then influence the JS DOM element properties.

Here is some JS source to calculate the CSS width from JS clientWidth.

      var style = window.getComputedStyle(element);
      var paddings = window.parseInt(style["padding-left"]) + window.parseInt(style["padding-right"]);
      return element.clientWidth - paddings;

Should you need to know the left and right margins of some element, do this:

      var style = window.getComputedStyle(element);
      var margins = window.parseInt(style["margin-left"]) + window.parseInt(style["margin-right"]);

Need to find out left + right border width?

      var borders = element.offsetWidth - element.clientWidth;

When you want to set two elements to same visible width, do this:

    var getPaddingsLeftRight = function(element) {
      var style = window.getComputedStyle(element);
      return window.parseInt(style["padding-left"]) + window.parseInt(style["padding-right"]);
    };

    var setSameWidth = function(sourceElement, targetElement) {
      var targetPaddings = getPaddingsLeftRight(targetElement);
      targetElement.style.width = (sourceElement.clientWidth - targetPaddings)+"px";
    };

Please mind that this JS code would not work for elements that have the box-sizing property set to border-box, or inherited that value.