display

JavaScript syntax:

display

Values:


none | inline | block | inline-block | list-item | run-in | table | 
inline-table | table-row-group | table-header-group | tablefooter-group | 
table-row | table-column-group | table-column | 
table-cell | table-caption | inherit

Initial value:

inline

Applies to:

All elements.

Inherited:

No.

Description:

display defines the kind of display box an element generates.

Examples:

 
<head>
<style>
.style1 {
  display: none
}
</style>
<script language="JavaScript">
  function fn1() {
    item1.style.display = "";
    item2.style.display = "none";
    item3.style.display = "none";
  }
  function fn2() {
    item1.style.display = "none";
    item2.style.display = "";
    item3.style.display = "none";
  }
  function fn3_1() {
    item1.style.display = "none";
    item2.style.display = "none";
    item3.style.display = "";
  }
  function fn5() {
    item1.style.display = "";
    item2.style.display = "";
    item3.style.display = "";
  }
  function fn6() {
    item1_1.style.visibility = "visible";
    item2_1.style.visibility = "visible";
    item3_1.style.visibility = "visible";
  }
</script>
</head>
<body>
  <ul>
    <li onclick="className='style1'">Item 1 - Double-click me</li>
    <li onclick="className='style1'">Item 2</li>
    <li onclick="className='style1'">Item 3</li>
    <li onclick="className='style1'">Item 4</li>
    <li onclick="className='style1'">Item 5</li>
  </ul>
  <table border=2>
    <th>Vehicles</th>
    <th>Potency</th>
    <th>Speed</th>
    <tr id="item1">
      <td>Cars</td>
      <td id="item1_1">11111</td>
      <td>High</td>
    </tr>
    <tr id="item2">
      <td>Cycles</td>
      <td id="item2_1">123123</td>
      <td>High</td>
    </tr>
    <tr id="item3">
      <td>Bicycles</td>
      <td id="item3_1">321123</td>
      <td>Slow</td>
    </tr>
  </table>
  <p>
    <input type=button style="width: 175" onclick="fn1()" value="Show Cars"> 
    <input type=button style="width: 175" onclick="fn2()" value="Show Cycles"> 
    <input type=button style="width: 175" onclick="fn3_1()" value="Show Bicycles"> 
    <input type=button style="width: 175" onclick="fn6();fn5()" value="Reset">
</body>

Click here to view the demo

Home
HTML CSS Book
CSS Reference

Property: