HTML的display 属性
作用：设置元素如何显示。
JavaScript语法：Object.style.display=value
说到display：none，想起它和visibility:hidden的对比。
display:none和visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:collapse
既然说到visibility属性，他还有visible和collapse属性值，visible和hidden对应，不需多说。collapse属性却很有意思，当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现会和浏览器不同而变化。
在此使用FF48.0.2、Chrome 52.0.2743.116和IE8测试：
在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。
在火狐浏览器和IE8里，使用 collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。效果类似于display：none。
test code as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
text-align: center;
padding-top: 20px;
font-family: Arial, sans-serif;
}
table {
border-collapse: separate;
border-spacing: 5px;
border: solid 1px black;
width: 500px;
margin: 0 auto;
}
th, td {
text-align: center;
border: solid 1px black;
padding: 10px;
}
.vc {
visibility: collapse;
}
.vh {
visibility: hidden;
}
button {
margin-top: 5px;
}
</style>
</head>
<body>
<table cellspacing="0" class="table lazy ">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Rocks</th>
</tr>
<tr>
<td>Apple</td>
<td>Celery</td>
<td>Granite</td>
</tr>
<tr>
<td>Orange</td>
<td>Cabbage</td>
<td>Flint</td>
</tr>
</table>
<p><button>collapse行1</button></p>
<p><button>hide行1</button></p>
<p><button>重置</button></p>
<script type="text/javascript">
var btns = document.getElementsByTagName('button'),
rows = document.getElementsByTagName('tr');
/* 使用FF和Chrome的测试代码，使用addEventListener()，false表示事件冒泡
btns[0].addEventListener('click', function () {
rows[1].className = 'vc';
}, false);
btns[1].addEventListener('click', function () {
rows[1].className = 'vh';
}, false);
btns[2].addEventListener('click', function () {
rows[1].className = '';
}, false);
*/
//使用IE8测试的代码,使用attachEvent()，默认事件冒泡
btns[0].attachEvent('onclick', function () {
rows[1].className = 'vc';
});
btns[1].attachEvent('onclick', function () {
rows[1].className = 'vh';
});
btns[2].attachEvent('onclick', function () {
rows[1].className = '';
});
</script>
</body>
</html>
这里复习了时间冒泡和IE8的事件处理兼容。
由于 IE8 及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。DOM2标准会建议采用冒泡阶段(false)，但是也可以采用捕获阶段(true）。
var btn = document.getElementById("myBtn"); //取得DOM元素
btn.attachEvent("onclick", function(){ //注意使用了带on的事件名和匿名函数
alert("Clicked");
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。