Posted on 2008-08-14 12:30
☆ 阅读(314)
评论(0) 编辑 收藏 所属分类:
javascript
javascript元素隐藏：
1．DIV和SPAN的区别：
SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含
段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元
素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，
当其他行内元素都不合适时，可以使用SPAN。
例如：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
display和visibility的用法:
display属性和visibility属性的用法比较相似；如果设置display的
属性为block，或设置visibility的属性为visible,都可以显示元素对象
内容。反之，如果设置display属性值为none,或设置visibility的属性值
为hidden。都将隐藏元素对象内容。它们之间的区别在于，当使用
display属性进行隐藏的时候，被隐藏的元素对象将不占位置。其他元素
将紧接着顺序显示。当使用visibility属性进行隐藏元素对象的操作时，
只是隐藏了当前对象的内容，当仍保留其区域。
如果使用display的none属性隐藏，则只能用display的block属性来恢
复。同理：如果使用visibility的hidden属性隐藏，则也只能用
visibility的visible来恢复。
<html><head><title>无标题文档</title></head><script>
function display(){
var type1 = document.getElementById("type1");
if(type1.checked){
document.getElementById("length").style.display = "none";
document.getElementById("width").style.display = "block";
document.getElementById("color").style.display = "block";
}
}
function show(){
document.getElementById("length").style.display = "block";
document.getElementById("width").style.display = "block";
document.getElementById("color").style.display = "block";
}
</script><body>
<input type="radio" name="type" id="type1" onclick="display()"/>隐藏“长度”
<input type="submit" name="submit" onclick="show()" value="重置"/>
<div id="length">长度<input type="text"/></div>
<div id="width">宽度<input type="text"/></div>
<div id="color">颜色<input type="text"/></div>
</body></html>