上午做了个练习,感觉还是有些用的不好,主要是还是没有形成自己的思路。

<!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>

.im{ width:100px;
height:100px;
background-color:#009}
.a{ width:200px;
height:200px;
background-color:#009}
.b{ width:50px;
height:50px;
background-color:#009}
.c{ width:100px;
height:100px;
background-color:#009;
display:none;}
.d{ width:100px;
height:100px;
background-color:#CF0}
</style>
<script>
var flag = true;
function A(){
var Aa = document.getElementById('img');
if(flag){
Aa.setAttribute('class','a');
flag =false;
} else{
Aa.setAttribute('class','im');
flag =true;
}
}
function B(){
var Ba = document.getElementById('img');
if(flag){
Ba.setAttribute('class','b');
flag = false;
} else{
Ba.setAttribute('class','im');
flag =true;
}
}
function C(){
var Ca = document.getElementById('img');
if(flag){
Ca.setAttribute('class','c');
flag = false;
} else{
Ca.setAttribute('class','im');
flag =true;
}
}
function D(){
var Da = document.getElementById('img');
if(flag){
Da.setAttribute('class','d');
flag = false;
} else{
Da.setAttribute('class','im');
flag =true;
}
}
/*function getShuXin(obj){
var objDiv = document.getElementById("pp");
objDiv.innerHTML = obj.getAttribute('name');
setTimeout(function(){
obj.removeAttribute('name');
objDiv.innerHTML = obj.getAttribute('name');
},1000);
}*/

</script>
</head>
<body>

<button onclick="A()">变大</button>
<button onclick="B()">变小</button>
<button onclick="C()">隐藏</button>
<button onclick="D()">变色</button><div id="img" class='im'></div>

<!--<button id="dd" name="div" onclick="getShuXin(this)">zheshidiv</button>
<div id="pp"></div>-->
</body>
</html>

posted on 2017-10-16 12:01  Heng23  阅读(155)  评论(0编辑  收藏  举报