js的自定義屬性
自定義屬性：js可以爲任意的HTML元素添加任意個自定義的屬性（可進行讀和寫的操作）
自定義屬性的設置方法：
HTML屬性值.自定義變量 = 賦值；
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.abc = 123;
alert(oBtn.abc);
var oBtn = document.getElementById('btn1');
oBtn.abc = 123;
alert(oBtn.abc);
}
一排圖片的點擊切換效果
1) 可以利用布爾值 只有兩個值 true爲真，false爲假
實例代碼：
<!DOCTYPE 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{ 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{ 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>
利用布爾值雖然可以實現單個的點擊切換效果，可是當有一排圖片都需要實現點擊切換的效果時，它就會出現故障，如上面的代碼，不能進行連續的一排圖片的點擊切換。
此時，如果想實現一排圖片而且每張圖片都可以點擊切換還可以一排進行連續點擊切換，就需要利用剛剛說的js的自定義屬性
實例代碼如下：
<!DOCTYPE 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>
<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>
在js中運用自定義的屬性，可以很簡單的實現這個效果，當然在js中，運用別的屬性也可以實現這個效果，不過，相比較而言，運用js中的自定義屬性，更爲簡單，更加方便，更好理解，代碼的性能更好。