HTML DOM Style overflow Property

HTMLWeb DevelopmentFront End Technology

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 −

ValueExplanation
scrollIt clips the content and scroll bars are added when necessary.
inheritIt inherits this property value from its parent element.
initialIt set this property value to its default value.
autoIt clip the content and add scroll bars when necessary.
hiddenIt hides the content flow outside the element box.
visibleIt doesn’t clip the content and content will flow outside the element box.

Example

Let us see an example of style overflow property −

 Live Demo

<!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 −

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

raja
Published on 23-Jul-2019 10:54:50
Advertisements