当前位置：首页 > news >正文

js---05 自定义属性

news 来源：原创 2024/5/7 8:49:26

<!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>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
    var aBtn = document.getElementsByTagName('input');
    // 想建立“匹配”“对应”关系，就用索引值
    var arr = [ '莫涛', '张森', '杜鹏' ];
    for( var i=0; i<aBtn.length; i++ ){
        aBtn[i].index = i;            // 每个都加一个属性，自定义属性（索引值）
        aBtn[i].onclick = function (){
            // alert( arr[ this.index ] );
            this.value = arr[ this.index ];
        };
    }
};
</script>
</head>

<body>

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />

</body>
</html>

window.onload = function (){
    var aBtn = document.getElementsByTagName('input');
    // aBtn[0].abc = 123;            // 自定义属性
    // alert( aBtn[0].abc );
    // aBtn[0].abc = 456;
    // JS 可以为任何HTML元素添加任意个 自定义属性
    for( var i=0; i<aBtn.length; i++ ){
        aBtn[i].abc = 123;
        aBtn[i].xyz = true;
    }
};

arrLi[i].onclick = function (){    
    for( var i=0; i<arrLi.length; i++ ){
        if( arrLi[i] !=this ){
            arrLi[i].className = '';
        }
    }
    if( this.className == '' ){
        this.className = 'hover';
    }else{
        this.className = '';
    }
};

for( var i=0; i<aUl.length; i++ ){
    aLi = aUl[i].getElementsByTagName('li');
    for( var j=0; j<aLi.length; j++ ){
        arrLi.push( aLi[j] );
    }
}

for( var i=0; i<aH2.length; i++ ){
    aH2[i].index = i;
    aH2[i].onclick = function (){
        
        for( var i=0; i<aH2.length; i++ ){
            if( i != this.index ){
                aUl[i].style.display = 'none';
                aH2[i].className = '';
            }
        }
        
        if( this.className == '' ){
            aUl[this.index].style.display = 'block';
            this.className = 'active';
        } else {
            aUl[this.index].style.display = 'none';
            this.className = '';
        }
    };
}