<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
document.getElementById("con").style.display="none";
}
function showtext()
{
document.getElementById("con").style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
如果你想通过这个简单的需求 去理解变量存在的意义是理解不了的..比如我把需求改一下
除了让标签隐藏还需要把标签颜色加深,字体加粗,字体颜色变红..我按照你的写法如下
function hidetext() {
document.getElementById("con").style.display="none";
document.getElementById("con").style.color="red";
document.getElementById("con").style.fontSize="20px";
document.getElementById("con").style.fontWeight="700";
}
你自己看着这代码臃肿吗? 如果使用变量存储一下呢,如下, 是不是整体看上去简洁,
var con = document.getElementById("con")
function hidetext() {
con.style.display="none";
con.style.color="red";
con.style.fontSize="20px";
con.style.fontWeight="700";
}
然后再提一个需求 如果id变了 不是取con,而是取newcon , 按照最上面的写法 是不是要改 4个地方的con , 而按下面的写法 是不是只要改1个地方的con
你自己去理解一下咯
个人见解为：便于阅读和维护。