标签：javascript 元素 显示 隐藏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>元素的显示和隐藏</title>
<style type="text/css">
img{
display:block;
}
</style>
<script type="text/javascript">
function change(){
var lu=document.getElementById("lu"); //DOM对象
lu.style.color="red";
lu.style.fontSize="25px";
lu.style.fontWeight="bold";
lu.style.borderLeftSize="2px";
lu.style.borderLeftColor="blue";
lu.style.borderLeftStyle="solid";
}
//通过display显示和隐藏元素
function hide1(){
if($("img2").style.display=="block"){
$("img2").style.display="none";
}else{
$("img2").style.display="block";
}
}
//通过visibility显示和隐藏元素
function hide2(){
$("img2").style.visibility="hidden";
}
//简化通过id获取元素
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<span id="lu">陆永洋</span>
<input type="button" value="变" onclick="change();" />
<hr/>
<input type="button" value="通过display显示和隐藏元素" onclick="hide1();" />
<input type="button" value="通过visibility显示和隐藏元素" onclick="hide2();" />
<img src="images/class1-1.jpg" id="img1" />
<img src="images/class1-2.jpg" id="img2" />
<img src="images/class1-3.jpg" id="img3" />
</body>
</html>
标签：javascript 元素 显示 隐藏
原文地址：http://blog.csdn.net/wangzi11322/article/details/45285613
