Hiding Elements

Description

The none value tells the browser not to create a box for the element and its descendent elements.

When the display property is set to none, the element doesn't occupy any space in the page layout.

Example


<!DOCTYPE HTML>
<html>
<body>
  <p id="toggle">
  The Cascading Style Sheets<!-- ww  w .  j a v a 2  s.  c o m-->
    is a style sheet language used for describing the
    look and formatting of a document written in a markup language.
   </p>
  <p>
  The Cascading Style Sheets
    is a style sheet language used for describing the
    look and formatting of a document written in a markup language.
  </p>
  <p>
    <button>Block</button>
    <button>None</button>
  </p>
  <script>
    var buttons = document.getElementsByTagName("BUTTON");
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].onclick = function(e) {
        document.getElementById("toggle").style.display = e.target.innerHTML;
      };
    }
  </script>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table