js的自定义属性
自定义属性:js可以为任意的HTML元素添加任意个自定义的属性(可进行读和写的操作)
var oBtn = document.getElementById('btn1');
oBtn.abc = 123;
alert(oBtn.abc);
<html>
<head>
<meta charset="utf-8">
<title>js的自定义属性</title>
<style>
h2{ height:30px; width:300px; border:2px solid pink; font-size:20px; text-align:center; line-height:30px; margin:40px auto;}
li{ height:250px; width:350px; border:2px solid yellow; margin-left:30px; float:left; background:url(imgs/z.1.jpg); list-style:none;}
</style>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var onOff = true; // 设置布尔值
for( var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
if(onOff){
this.style.background = 'url(imgs/z.2.jpg)';
onOff = false;
} else{
this.style.background = 'url(imgs/z.1.jpg)';
onOff = true;
}
}
}
}
</script>
</head>
<body>
<h2>js的自定义属性的应用</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js的自定义属性</title>
<style>
h2{ height:30px; width:300px; border:2px solid pink; font-size:20px; text-align:center; line-height:30px; margin:40px auto;}
li{ list-style:none; margin:0; padding:0;height:250px; width:350px; background:url(imgs/z.1.jpg); border:2px solid yellow; float:left; margin-left:30px;}
</style>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onOff = true; // js的自定义属性
aLi[i].onclick = function(){
if(this.onOff){
this.style.background = 'url(imgs/z.2.jpg)';
this.onOff = false;
}else{
this.style.background = 'url(imgs/z.1.jpg)';
this.onOff = true;
}
}
}
}
</script>
</head>
<body>
<h2>js的自定义属性的应用</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>