Javascript DOM CSS Style boxSizing Property

Introduction

Change the boxSizing property:

document.getElementById("myDIV").style.boxSizing = "border-box";

Click the button to set the boxSizing property of the two boxes to "border-box":

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
div.container {// w w  w .ja v  a  2  s  .c  om
  width: 300px;
  border: 1px solid;
}

div.box {
  width: 150px;
  border: 3px solid coral;
  float: left;
  padding: 10px;
}
</style>
</head>
<body>

<div class="container">
<div class="box" id="box1">This is BOX1.</div>
<div class="box" id="box2">This is BOX2.</div>
<div style="clear:both;"></div>
</div>
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("box1").style.MozBoxSizing = "border-box"; /* Code for old Firefox */
  document.getElementById("box2").style.MozBoxSizing = "border-box"; /* Code for old Firefox */
  document.getElementById("box1").style.boxSizing = "border-box";
  document.getElementById("box2").style.boxSizing = "border-box";
}
</script>

</body>
</html>

The boxSizing property allows you to define certain elements to fit an area in a certain way.

For example, if you want two bordered boxes side by side, it can be achieved through setting boxSizing to "border-box".

This forces the browser to place the border and padding inside the box.

Property Values

Value	Description
content-box	`Default`. The specified width and height apply to the width and height respectively of the content box of the element.
border-box	The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The boxSizing property returns a String representing the box-sizing property of an element.

Previous Next