<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>JS编程总结练习</title>
<style type="text/css">
p{
color:yellow;
background-color: #ccc;
width:500px;
height:300px;
border:1px solid black;
}
</style>
</head>
<body>
<p id="id01" class="cl01">
看灰色的天,慢慢向身后在倾斜,我没有终点,也许是爱旅途的感觉,自由明显,为何快乐那么隐约,喧嚣的边缘,为何没发现那条孤独的界线,打在脸上的雨点模糊了视线,我多像飘在风中的落叶,我看见到处都是空白的世界,谁的脸都只是冷漠的风景线,我不知道幸福在哪一边,也许我要的爱只是一瞬间.</p>
<script type="text/javascript">
function ch_color(){
var ch01=document.getElementById("id01");
ch01.style.color="red";
ch01.style.backgroundColor="pink";
}
function ch_width_height(){
var ch02=document.getElementById("id01");
ch02.style.width="1000px";
ch02.style.height="150px";
}
function ch_display_off(){
var ch03=document.getElementById("id01");
ch03.style.display="none";
}
function ch_display_on(){
var ch04=document.getElementById("id01");
ch04.style.display="block";
}
function ch_all(){
var mes=confirm("确认取消所有设置？");
if(mes)
{
var reset_cfg=document.getElementById("id01");
reset_cfg.style.color="yellow";
reset_cfg.style.width="500px";
reset_cfg.style.height="300px";
}
}
</script>
<form>
<input type="button" name="改变颜色" value="改变颜色" onclick="ch_color()" />
<input type="button" name="改变宽高" value="改变宽高" onclick="ch_width_height()" />
<input type="button" name="隐藏内容" value="隐藏内容" onclick="ch_display_off()" />
<input type="button" name="显示内容" value="显示内容" onclick="ch_display_on()" />
<input type="button" name="取消设置" value="取消设置" onclick="ch_all()" />
</form>
</body>
</html>
