Javascript DOM CSS Style width Property

Introduction

Set the width of a <button> element: 

document.getElementById("myBtn").style.width = "300px";

View in separate window 

<!DOCTYPE html>
<html>
<body>

<button type="button" id="myBtn" onclick="myFunction()">Change the width of this button</button>

<script>
function myFunction() {/*from  w  w  w. j a va2s  .com*/
  document.getElementById("myBtn").style.width = "300px";
}
</script>

</body>
</html>

The width property sets or gets the width an element.

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

The overflowing content can be manipulated with the overflow property.

Use the height property to set or return the height of an element.

Property Values

Value Description
autoThe browser sets the width. default
length Defines the width in length units
% Defines the width in % of the parent element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The width property return a String representing the width of an element.




PreviousNext

Related