操作属性：
对象.setAttribute(‘属性名‘,‘值‘); - 添加属性
对象.getAttribute(‘属性名‘); - 获取属性值，如无此属性，那么返回null
<!DOCTYPE html>
<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">
.div1 {
width: 100px;
height: 50px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="div1" dd="1"></div>
<div class="div1" dd="1"></div>
<div class="div1" dd="0"></div>
<div class="div1" dd="0"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
<script type="text/javascript">
var aa = document.getElementsByClassName("div1");
for (var i = 0; i < aa.length; i++) {
if (aa[i].getAttribute("dd") == "1")
aa[i].style.backgroundColor = "green";
else if (aa[i].getAttribute("dd") == "0")
aa[i].style.backgroundColor = "yellow";
else
aa[i].style.backgroundColor = "red";
}
</script>
对象.removeAttribute(‘属性名‘); - 移除属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮111" id="dd1" />
<input type="button" value="按钮222" id="dd2" />
</body>
</html>
<script type="text/javascript">
var aaa = document.getElementById("dd1");
var bbb = document.getElementById("dd2");
//按钮111的点击事件
aaa.onclick = function () {
//按钮111添加一个属性不可用
this.setAttribute("disabled", "disabled");
//获取aaa中属性value的值
var ccc = this.getAttribute("value");
alert(ccc);
}
//bbb的点击事件
bbb.onclick = function () {
//移除aaa的disabled属性
aaa.removeAttribute("disabled");
}
</script>
2.验证5+5=？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
5+5=
<input type="text" id="dd1" data="10" />
<input type="button" id="dd2" value="验证"/>
</body>
</html>
<script type="text/javascript">
var aaa = document.getElementById("dd1");
var bbb = document.getElementById("dd2");
//按钮111的点击事件
//bbb的点击事件
bbb.onclick = function () {
var txt = aaa.getAttribute("data");
if (txt == aaa.value)
alert("正确");
else
alert("笨蛋");
}
</script>
定时器：
window.setTimeout(function(){},间隔时间毫秒);
- 定时炸弹，延迟执行，只执行一次
window.setInterval(function(){},间隔的时间毫秒);
- 无限循环，每一次循环有间隔时间，一般不要小于20毫秒
- 它是有返回值的，可以用一个变量来接收这个定时器对象
window.clearInterval(要关闭的定时器对象);
一旦执行这句代码，会立刻停止此定时器对象的执行
对象.offsetWidth
时间： 2024-10-08 00:55:48