您的位置：首页 > 其它
更改背景颜色

2013-12-24 12:00 267 查看
<html>
<head>
<title>更改背景颜色</title>

<script>
function change1(){
//获取body节点对象
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode);
//alert(bodyNode.nodeName);

//改变背景颜色
bodyNode.bgColor = "#ff0000";
}

function change2(){
//获取body节点对象
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode);
//alert(bodyNode.nodeName);

//改变背景颜色
bodyNode.bgColor = "#00ff00";
}

function change3(){
//获取body节点对象
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode);
//alert(bodyNode.nodeName);

//改变背景颜色
bodyNode.bgColor = "#0000ff";
}

function change4(){
//获取body节点对象
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode);
//alert(bodyNode.nodeName);

//改变背景颜色
bodyNode.style.backgroundColor   = "#ff0000";
}

function change5(){
//获取body节点对象
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode);
//alert(bodyNode.nodeName);

//改变背景颜色
bodyNode.style.backgroundColor  = "#00ff00";
}

function change6(){
//获取body节点对象
var bodyNode = document.getElementsByTagName("body")[0];
//alert(bodyNode);
//alert(bodyNode.nodeName);

//改变背景颜色
bodyNode.style.backgroundColor  = "#0000ff";
}

function change(c){
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = c;
}

function aotochange(c){
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.style.backgroundColor = c;
}
</script>
</head>

<body>

更改背景颜色<br/>
通过bgColor设置：
<input type="button" value="red" onclick="change1()">
<input type="button" value="green" onclick="change2()">
<input type="button" value="blue" onclick="change3()">
<hr/>
通过style设置；
<input type="button" value="red" onclick="change4()">
<input type="button" value="green" onclick="change5()">
<input type="button" value="blue" onclick="change6()">
<hr/>
传入参数：
<input type="button" value="red" onclick="change('#ff0000')">
<input type="button" value="green" onclick="change('#00ff00')">
<input type="button" value="blue" onclick="change('#0000ff')">

<hr/>
通过鼠标悬浮响应事件：
<input type="button" value="red" onmousemove="aotochange('#ff0000')">
<input type="button" value="green" onmousemove="aotochange('#00ff00')">
<input type="button" value="blue" onmousemove="aotochange('#0000ff')">

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航