HTML DOM Style overflow Property

The DOM style overflow property returns and modify the overflow CSS property of an element in an HTML document.

Syntax

Following is the syntax −

Returning overflow

object.style.overflow

Modifying overflow

object.style.overflow = “value”

Values

Here value can be −

Value	Explanation
scroll	It clips the content and scroll bars are added when necessary.
inherit	It inherits this property value from its parent element.
initial	It set this property value to its default value.
auto	It clip the content and add scroll bars when necessary.
hidden	It hides the content flow outside the element box.
visible	It doesn’t clip the content and content will flow outside the element box.

Example

Let us see an example of style overflow property −

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
   }
   p {
      border: 2px solid #fff;
      margin: 1.5rem auto;
      height: 100px;
      overflow: scroll;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM Style overflow Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Change overflow</button>
<script>
   function add() {
      document.querySelector('p').style.overflow = "hidden";
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Style overflow Property

Click on “Change overflow” button to change the value of overflow CSS property from scroll to hidden.

HTML DOM Style overflow Property