JavaScript改变Div样式-chageDivstyle

原创2019-07-26 15:55:1119
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>chageDivstyle</title><style>*{margin:0px;padding:0px;}.box{width:366px;height:400px;margin:2

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>chageDivstyle</title>

<style>

*{margin:0px;padding:0px;}

.box{width:366px;height:400px;margin:220px 120px;float:left;border:0px;}

/*.main{width:100%;height:1080px;margin:0px auto;background:url(images/主菜单背景.png);}*/

.main{width:100%;height:1080px;margin:0px auto;background-color:#000915;}

</style>

</head>

<body>

<div>

<div id="study"><input type="image" id="ima1" src="images/学习模式(正常).png" onclick=" myfovus1(this)" onmouseover="myfovus2(this)"  onmouseout="myfovus7(this)"></div>

<div id="train"><input type="image" id="ima2"  src="images/训练模式(正常).png" onclick=" myfovus3(this)"  onmouseover="myfovus4(this)"  onmouseout="myfovus8(this)"></div>

<div id="examine"><input type="image" id="ima3"  src="images/考核模式(正常).png" onclick=" myfovus5(this)"  onmouseover="myfovus6(this)"  onmouseout="myfovus9(this)"></div>

</div>


<script type="text/javascript">

function myfovus1(x){

document.getElementById("ima1").src="images/学习模式(划过).png";

}

function myfovus2(y){

document.getElementById("ima1").src="images/学习模式(点击).png";

}


function myfovus3(m){

document.getElementById("ima2").src="images/训练模式(划过).png";

}

function myfovus4(n){

document.getElementById("ima2").src="images/训练模式(点击).png";

}


function myfovus5(a){

document.getElementById("ima3").src="images/考核模式(划过).png";

}

function myfovus6(b){

document.getElementById("ima3").src="images/考核模式(点击).png";

}



function myfovus7(c){

document.getElementById("ima1").src="images/学习模式(正常).png";

}

function myfovus8(d){

document.getElementById("ima2").src="images/训练模式(正常).png";

}

function myfovus9(e){

document.getElementById("ima3").src="images/考核模式(正常).png";

}

</script>

</body>

</html>

效果图如下:[object Object]

批改老师:欧阳克批改时间:2019-07-27 11:21:31
老师总结:完成的不错。js是终生学习语言,功能非常强大。继续加油

发布手记

热门词条

第九期线上培训班