Javascript Reference - HTML DOM Style maxWidth Property

The max-width property in CSS controls max width on block-level elements or elements with absolute or fixed position.

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

Browser Support


`maxWidth`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the maxWidth property:

var v = object.style.maxWidth

Set the maxWidth property:

object.style.maxWidth='none|length|%|initial|inherit'

Property Values

Value	Description
none	Default. No control on the element width.
length	Set the maximum width in length units
%	Set the maximum width in percent of the container element
initial	Set to default value.
inherit	Inherits from parent element.

Technical Details

Default Value:	none
Return Value:	A string representing the maximum width
CSS Version	CSS2

Example

The following code shows how to set the maximum width of an element.


<!DOCTYPE html>
<html>
<body>
<div style="background:yellow;" 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.</div>
<button type="button" onclick="myFunction()">Set max width</button>
<script>
function myFunction() {<!--  ww w .ja v a2 s. c om-->
    document.getElementById("myDiv").style.maxWidth = "100px";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the maximum width of an element.


<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">test</button>
<div style="background:yellow;max-width:100px;" 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. 
</div><!--   w w  w  .j av a 2 s . c o m-->
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.maxWidth);
}
</script>

</body>
</html>

The code above is rendered as follows: