HTML CSS Reference/CSS Attributes and Javascript Style Properties/display
Содержание
"display" Example
<html>
<head>
<style>
.style1 {
display:none
}
</style>
<script language="JavaScript">
function function1() {
item1.style.display="";
item2.style.display="none";
item3.style.display="none";
}
function function5() {
item1.style.display="";
item2.style.display="";
item3.style.display="";
}
function function6() {
item1_1.style.visibility="visible";
item2_1.style.visibility="visible";
item3_1.style.visibility="visible";
}
</script>
</head>
<body>
<table cellspacing=5 cellpadding=5 border=2>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>Header 3</th>
</tr>
<tr id="item1">
<td>Cars</td>
<td id="item1_1">item 1</td>
<td>item 2</td>
</tr>
<tr id="item2">
<td>item 3</td>
<td id="item2_1">item 4</td>
<td>High</td>
</tr>
<tr id="item3">
<td>item 5</td>
<td id="item3_1">item 6</td>
<td>Slow</td>
</tr>
</table>
<p>
<input type=button style="width:175" onclick="function1()" value="Show some ">
<input type=button style="width:175" onclick="function6();function5()" value="Reset">
<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>
</body>
</html>
"display" is applied to
+----------------+--------------------------------------------------------------+
| Applied_To |<a> <acronym> |
| |<address> <applet> |
| |<b> <bdo> |
| |<big> <blockquote> |
| |<body> <br> |
| |<button> <caption> |
| |<center> <cite> |
| |<code> <col> |
| |<colgroup> currentStyle |
| |<custom> <dd> |
| |defaults <del> |
| |<dfn> <dir> |
| |<div> <dl> |
| |<dt> <em> |
| |<embed> <fieldset> |
| |<font> <form> |
| |<frame> <hn> |
| |<hr> <html> |
| |<i> <iframe> |
| |<img> <input type="button"> |
| |<input type="checkbox"> <input type="file"> |
| |<inputtype="image"> <input type="password"> |
| |<input type="radio"> <input type="reset"> |
| |<input type="submit"> <input type="text"> |
| |<ins> <kbd> |
| |<label> <legend> |
| |<li> <listing> |
| |<marquee> <menu> |
| |<nobr> <object> |
| |<ol> <p> |
| |<pre> <q> |
| |<rt> <ruby> |
| |<s> <samp> |
| |<select> <small> |
| |<span> <strike> |
| |<strong> style |
| |<sub> <sup> |
| |<table> <tbody> |
| |<td> <textarea> |
| |<tfoot> <th> |
| |<thead> <tr> |
| |<tt> <u> |
| |<ul> <var> |
| |<xmp> |
+----------------+--------------------------------------------------------------+
"display" Possible Values
Possible Values
block rendered as a block element, with border features, that occupies
a new line.
inline The default; generate one or more boxes without occupying a new
line.
none not rendered.
compact Creates either a block or an inline element, depending on the
content of the element.
inline-block The element is rendered inline,
list-item (IE6+) generate a principal block box and list-item inline box
with border features.
table-header-group displays the element as a table header group.
table-footer-group displays the element as a table footer group.
"display" Syntax and Note
Note:
Whether to draw an element.
Syntax:
element { display: value }
elementID.style.display = "value"
document.all.elementID.style.display = "value" // IE only