Javascript Reference - HTML DOM Style minWidth Property

The min-width property in CSS controls the min width for block-level elements or elements with absolute or fixed position.

The minWidth property sets or gets the minimum width of an element.

Browser Support


`minWidth`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the minWidth property:

var v = object.style.minWidth;

Set the minWidth property:

object.style.minWidth='length|%|initial|inherit'

Property Values

Value	Description
length	Default to 0. Set the minimum width in length units.
%	Set the minimum width in percent of the container element
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	0
Return Value:	A string representing the minimum width
CSS Version	CSS2

Example

The following code shows how to set the minimum width.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from   ww w  . j a v  a  2s  . co m-->
    width: 50%;
    background-color: yellow;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
  <p>this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. 
  </p>
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.minWidth = "400px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the minimum width.


<!DOCTYPE html>
<html>
<body>
<!--   w  w  w  . j  av  a  2  s. co  m-->
<p style="background:red;min-width:600px;" id="myP">
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
</p>
<button type="button" onclick="myFunction()">Return min width</button>
<script>
function myFunction() {
    console.log(document.getElementById("myP").style.minWidth);
}
</script>
</body>
</html>

The code above is rendered as follows: