Hiding and displaying elements are common effects in web pages and have several implementing ways.
Setting the display property of style can hide or display the element. When display is none, the element doesn't display at all and the layout doesn't consider it. That's to say, the element doesn't occupy a visible space. Setting display as block will display the element as a block-level element, such as paragraphs and headers. Setting display as inline will display the element as an inline-level element, like span elements.
Below is a simple example.
<!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'>Toggle the visible status</button>
<hr>
This is a text! This is a text! This is a text! This is a text! This is a text!
<div id="message">Message 1</div>
This is other text!This is other text!This is other text!This is other text!This is other text!
</body>
</html>In the above example, hiding the div element is archived through setting its display none. We also save its original display value. When displaying the element, we recover its original display value if there's one, or use the element's default value. For example, a div element is block, and a span element is inline.
Setting the visibility property of style as visible or hidden can also display or hide an element. An element with a hidden visibility won't be displayed, yet the layout will consider it. That's to say, it still occupies a space in the display.
In conclusion, display is a setting relative to the layout. If display is none, the element is none in the layout. Since it's none in the layout, it's not visible. The visibility is simply a setting about visual effects. So, if display is none and visibility is visible, the element is still not visible because it's not taken into consideration in the layout. If display isn't none and visibility is hidden, though the element isn't visible, yet it still occupies a space in the layout.
The opacity of an element also affects its visual effects. An element with the opacity zero, of course, is not visible. It's not common, however, to use the opacity to display or hide an element. The opacity is often used to do translucent, fade-out and fade-in effects.
The setting of an element's opacity has browser-compatible problems. The specification says that you should set the opacity property of style a number from 0 to 1. The 1 is opaque and 0 is transparent. Internet Explorer says that you should give the filter property of style the format alpha(opacity=number), where the number is from 0 to 100. A cross-browser way to set the opacity is as follow:
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) + ')'
}
}
When an element's opacity is 0, it's not visible. The layout, however, still considers it, so the element still occupies a space. The following example implements simple fade-in and fade-out effects. If an element's opacity has been set, it will recover its origin opacity after fading in.
<!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'>Fade Out</button>
<button id='fadeIn'>Fade In</button><br>
<img id="image" src="../images/caterpillar_small.jpg">
</body>
</html>