網頁中經常作的特效，就是將元素隱藏或顯示。隱藏或顯示網頁上有幾種方式可以實作。
可以透過設定style屬性的display來顯示或隱藏元素，display設 定為none時，元素就會從畫面上消失，而且不列入排版考 量，也就是畫面上看起來，元素原本所佔據的空間消失了，如果設定display為block則 會將元素以區塊方式顯示，像是段落與標題。設定display為inline則 會將元素以行內方式顯示，像是span元素。
一個簡單的例子如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#message {
color: #ffffff;
background-color: #ff0000;
border-width: 10px;
border-color: black;
border-style: solid;
width: 100px;
height: 50px;
padding: 50px;
}
</style>
<script type="text/javascript">
window.onload = function(event) {
function style(obj, prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(obj, null)[prop];
}
else if(obj.currentStyle) {
return obj.currentStyle[prop];
}
else {
return null;
}
}
function show(element) {
element.style.display = element.previousDisplay || '';
if(style(element, 'display') === 'none') {
var node = document.createElement(element.nodeName);
document.body.appendChild(node);
element.style.display = style(node, 'display');
document.body.removeChild(node);
}
}
function hide(element) {
element.previousDisplay = style(element, 'display');
element.style.display = 'none';
}
document.getElementById('toggle').onclick = function() {
var message = document.getElementById('message');
if(style(message, 'display') === 'none') {
show(message);
}
else {
hide(message);
}
};
};
</script>
</head>
<body>
<button id='toggle'>切換顯示狀態</button>
<hr>
這是一些文字！這是一些文字！這是一些文字！這是一些文字！這是一些文字！
<div id="message">這是訊息一</div>
這是其它文字！這是其它文字！這是其它文字！這是其它文字！這是其它文字！
</body>
</html>
在上例中，透過將 display設定為none來隱藏元素，並記錄原有的display值，而顯示元素時，若有記錄原display值則恢復為原本的值，否則就使用元素預 設的值，例如<div>會設定為block，而<span>會設定為inline。
設定style的visibility為visible或hidden亦可顯示或隱藏元素，元素的visibility被設為 hidden時，雖然畫面上看不見，但排版仍會考慮它，也就是元素在畫面上仍會佔有一塊空間。
就結論而言，display其實是指排版上的設定，設定為 none時，表示排版上不考慮，既然不考慮排版，所以也就看不見，visibility 則只是單純設定視覺效果。所以display設定為none，而visibility設定為visible時，也是看不見元素的， 因為排版上不考慮，而display不是none，而visibility為hidden時，排版上會考慮，所以空間會佔據，但看不到元素。
另一個亦可影響元素視覺效果的是元素的不透明度，元素的不透明度為0時，元素當然就完全看不見了，不過，通常不會用不透明度來顯示或隱藏元素，而會用 來作半透明、淡出、淡入的效果。
要設定元素的不透明度，存在著瀏覽器差異，標準上是指定0 到1間的數值給style的opacity，1表示完全不透明，0就是透明了。Internet Explorer上則要使用alpha(opacity=數 值)的方式指定給style的filter特性，數值是100到0。一個跨瀏覽設定不透明度的方式如下：
function opacity(element, value) {
if(style(element, 'opacity') !== undefined) {
element.style.opacity = value;
}
else {
element.style.filter = 'alpha(opacity=' + parseInt(value * 100) + ')'
}
}
if(style(element, 'opacity') !== undefined) {
element.style.opacity = value;
}
else {
element.style.filter = 'alpha(opacity=' + parseInt(value * 100) + ')'
}
}
元素的不透明度為0時，雖然看不到元素，但排版上仍會考慮它的存在，所以元素仍然佔據空間。下面這個例子，實作了簡單的淡出、淡入，如果元素本身有設 定不透明度，淡入時會回復至原有的不透明度：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript">
window.onload = function(event) {
function style(obj, prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(obj, null)[prop];
}
else if(obj.currentStyle) {
return obj.currentStyle[prop];
}
else {
return null;
}
}
function opacity(element, value) {
if(value === undefined) {
var opt = style(element, 'opacity')
|| style(element, 'filter');
if(opt === '') {
return 1;
}
if(opt.indexOf('alpha') !== -1) {
return opt.substring(14, opt.length - 1) / 100;
}
return parseFloat(opt);
}
if(style(element, 'opacity') !== undefined) {
element.style.opacity = value;
}
else {
element.style.filter =
'alpha(opacity=' + parseInt(value * 100) + ')';
}
}
function fadeIn(element, speed, steps) {
speed = speed || 5000;
steps = steps || 10;
var target = element.previousOpacity || 1;
delete element.previousOpacity;
var timeInterval = speed / steps;
var valueStep = target / steps;
var opt = 0;
setTimeout(function next() {
opt += valueStep;
if(opt < target) {
opacity(element, opt);
setTimeout(next, timeInterval);
}
else {
opacity(element, target);
}
}, timeInterval);
}
function fadeOut(element, speed, steps) {
speed = speed || 5000;
steps = steps || 10;
element.previousOpacity = opacity(element);
var timeInterval = speed / steps;
var valueStep = element.previousOpacity / steps;
var opt = element.previousOpacity;
setTimeout(function next() {
opt -= valueStep;
if(opt > 0) {
opacity(element, opt);
setTimeout(next, timeInterval);
}
else {
opacity(element, 0);
}
}, timeInterval);
}
var image = document.getElementById('image');
document.getElementById('fadeIn').onclick = function() {
fadeIn(image, 2000);
};
document.getElementById('fadeOut').onclick = function() {
fadeOut(image, 2000);
};
};
</script>
</head>
<body>
<button id='fadeOut'>淡出</button>
<button id='fadeIn'>淡入</button><br>
<img id="image" src="../../images/caterpillar_small.jpg">
</body>
</html>