自定义属性应用

辛苦的码农20200609

于 2020-07-15 18:04:34 发布

阅读量71

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjkaca1a1j0j.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; width:114px; height:140px; background:url(img/normal.png); float:left; margin-right:20px; }
</style>
<script>
window.onload = function (){
    var aLi = document.getElementsByTagName('li');
    // var onOff = true;    // 只能控制一组！
    
    for( var i=0; i<aLi.length; i++ ){
        
        aLi[i].onOff = true;
        
        aLi[i].onclick = function (){
            
            // alert( this.style.background );
            // 背景不能判断
            // color red #f00 
            // 相对路径
            
            if ( this.onOff ) {
                this.style.background = 'url(img/active.png)';
                this.onOff = false;
            } else {
                this.style.background = 'url(img/normal.png)';
                this.onOff = true;
            }
        };
    }
};
</script>
</head>

<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>