<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="tzy1.css" type="text/css"> ???<script type="text/javascript" src="tzy1.js" language="JavaScript"></script></head><body><div id="div"><b id="b">我是一只小小鸟</b></div><form> ???<input type="button" value="随机改变字体颜色按钮" onclick="gbzt()"> ???<input type="button" value="随机改变背景颜色按钮" onclick="gbbj()"></br> ???<input type="text" id="text"> ???内容<input type="button" value="改变内容" onclick="gbtext()"></br> ???宽度<input type="text" id="gbwid">px ???<input type="button" value="改变背景宽度" onclick="gbwidth()"></br> ???高度<input type="text" id="gbhei">px ???<input type="button" value="改变背景高度" onclick="gbheight()"></br> ???<input type="reset" value="清空输入框"></br> ???<input type="button" value="字体隐藏" onclick="ycb()"> ???<input type="button" value="全部隐藏" onclick="ycdiv()"></br> ???<input type="button" value="字体显示" onclick="xsb()"> ???<input type="button" value="全部显示" onclick="xsdiv()"></br> ???<input type="button" value="是否重置" onclick="firm()"></form></body></html>
div{ ???color: forestgreen; ???background-color: coral; ???width: 100px; ???height: 100px;}var chars = [‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘];var color;function randomColor() { ???color=""; ???for(var i=0;i<6;i++){ ???var count = Math.floor(Math.random()*16); ???color += chars[count];}}function gbzt() { ???randomColor(); ???document.getElementById("div").style.color="#"+color;}function gbbj() { ???randomColor(); ???document.getElementById("div").style.backgroundColor="#"+color;}function gbwidth() { ??var val = document.getElementById("gbwid").value; ??if(isNaN(val)||val==""){ ??????alert("必须输入数字,不能为空") ??}else{ ???document.getElementById("div").style.width=val+‘px‘; ??}}function gbheight() { ???var val = document.getElementById("gbhei").value; ???if(isNaN(val)||val==""){ ???????alert("必须输入数字,不能为空") ???}else{ ???????document.getElementById("div").style.height=val+‘px‘; ???}}function gbtext() { ???var val = document.getElementById("text").value; ???document.getElementById("b").innerText = val;}function ycb() { ???document.getElementById("b").style.display = "none";}function ycdiv() { ???document.getElementById("div").style.display = "none";}function xsb() { ???document.getElementById("b").style.display = "block";}function xsdiv() { ???document.getElementById("div").style.display = "block"; ???document.getElementById("b").style.display = "block"}function firm(){ ???var yesorno = window.confirm("您确定取消所有设置么?") ???if(yesorno==true){ ???????window.location.replace("tzy1.html"); ???}else{ ???????alert("没事瞎点什么！！！") ???}}HTML DOM应用案例
原文地址：http://www.cnblogs.com/ttzzyy/p/7536459.html