Javascript DOM CSS Style maxWidth Property

Introduction

Set the maximum width of a <div> element:

document.getElementById("myDiv").style.maxWidth = "100px";

View in separate window

<!DOCTYPE html>
<html>
<body>

<div style="background:red;" id="myDiv">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div><br>

<button type="button" onclick="myFunction()">Set max width</button>

<script>
function myFunction() {/*from   w  ww . j a v  a  2s.com*/
  document.getElementById("myDiv").style.maxWidth = "100px";
}
</script>

</body>
</html>

The maxWidth property sets or gets the maximum width of an element.

The maxWidth property has effect only on block-level elements or on elements with absolute or fixed position.

The width of an element can never be greater than the value set by the maxWidth property.

Property Values

Value	Description
none	No limit on the width. `default`
length	Sets the maximum width in length units
%	Sets the maximum width in % of the parent element
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The maxWidth property returns a String representing the maximum width of an element.

Previous Next