您的位置：首页 > Web前端 > JavaScript

js的自定义属性及多一排图片的点击切换效果的实现

2017-06-15 18:42 661 查看

js的自定义属性

自定义属性：js可以为任意的HTML元素添加任意个自定义的属性（可进行读和写的操作）

自定义属性的设置方法：
HTML属性值.自定义变量 = 赋值；
window.onload = function(){

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>

<
4000
;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>

在js中运用自定义的属性，可以很简单的实现这个效果，当然在js中，运用别的属性也可以实现这个效果，不过，相比较而言，运用js中的自定义属性，更为简单，更加方便，更好理解，代码的性能更好。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航