动态样式CSS-动态样式的字型与色彩。
1，要点：先获得标签对象，再通过sytle对其属性进行设置
2，主要创新：改变页面的背景颜色：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#bodycolor
{
font-size:12pt;
color:red;
}
.littlered
{
color:red;
font-size:9px;
}
.bigred
{
color:red;
font-size:14px;
}
h2
{
font-size:16px;
color:yellow;
background-color:blue;
}
</style>
<script language="javascript">
function setWhite()
{
var objEle = document.all.tags("H2");
objEle(0).style.color="white";
}
function setGreen()
{
bodycolor.style.color="green";
}
function setLarge()
{
document.all("myH2").style.fontSize="18pt";
}
function setSmall()
{
document.all.bodycolor.style.fontSize="10pt";
}
function hideElement()
{
if (myH2.style.display == "none")
myH2.style.display = "";
else
myH2.style.display = "none";
}
function setBackgroundRed()
{
mybody.style.backgroundColor = "red"
}
function setBackgroundYellow()
{
mybody.style.backgroundColor = "yellow"
}
function setBackgroundBlue()
{
mybody.style.backgroundColor = "blue"
}
function setBackgroundWhite()
{
mybody.style.backgroundColor = "white"
}
</script>
</head>
<body id="mybody">
<h2 id="myH2">动态样式的字型与色彩</h2>
<hr />
<div id="bodycolor"> 动态样式的字型与色彩</div>
<p class="littlered" onmousemove="this.style.color='blue';"
onmouseout="this.style.color='red';"
onclick="this.className='bigred';">动态样式的字型与色彩</p>
<form>
<input type="button" onclick="setWhite()" value="白色" />
<input type="button" onclick="setGreen()" value="绿色" />
<input type="button" onclick="setLarge()" value="放大" />
<input type="button" onclick="setSmall()" value="缩小" />
<input type="button" onclick="hideElement()" value="隐藏" />
<input type="button" onclick="setBackgroundRed()" value="红色" />
<input type="button" onclick="setBackgroundYellow()" value="黄色" />
<input type="button" onclick="setBackgroundBlue()" value="蓝色" />
<input type="button" onclick="setBackgroundWhite()" value="白色" />
</form>
</body>
</html>
