如何变换颜色

y362623206 2015-11-11 09:31:53

这里有3个

<span>a</span><span>b</span><span>c</span>

点击一下文字变成红色，再点击变成黑色
还有一点就是点击第一个变红色然后点第二个，第三个还是红色然后点击随便一个又变回黑色

...全文

95 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

y362623206 2015-11-11

打赏
举报

引用 1 楼 jikeytang 的回复:

看看这个是不是你要的结果：


var div = document.getElementById('div');
var span = div.getElementsByTagName('span');
for(var i = 0; i < span.length; i++){
    span[i].onclick = function(){
        if(this.className.length){
            this.className = '';
        } else {
            this.className = 'red';
        }
    }
}

完整代码：


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        #div{ width:320px;margin: 30px auto;}
        #div span{ display:inline-block; width:100px; height:30px; line-height:30px; text-align:center; border:1px solid #ccc;cursor: pointer;}
        #div span:hover{background: #f1f1f1;}
        #div span.red{background: #e00;color: #fff; font-weight:bold;}
    </style>
</head>
<body>
<div id="div">
    <span>a</span><span>b</span><span>c</span>
</div>
<script>
    (function(){
        var div = document.getElementById('div');
        var span = div.getElementsByTagName('span');
        for(var i = 0; i < span.length; i++){
            span[i].onclick = function(){
                if(this.className.length){
                    this.className = '';
                } else {
                    this.className = 'red';
                }
            }
        }
    }());
</script>
</body>
</html>

是这个效果感谢大神

豪情 2015-11-11

打赏
举报

看看这个是不是你要的结果：



var div = document.getElementById('div');

var span = div.getElementsByTagName('span');

for(var i = 0; i < span.length; i++){

    span[i].onclick = function(){

        if(this.className.length){

            this.className = '';

        } else {

            this.className = 'red';

        }

    }

}

完整代码：



<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style type="text/css">

        #div{ width:320px;margin: 30px auto;}

        #div span{ display:inline-block; width:100px; height:30px; line-height:30px; text-align:center; border:1px solid #ccc;cursor: pointer;}

        #div span:hover{background: #f1f1f1;}

        #div span.red{background: #e00;color: #fff; font-weight:bold;}

    </style>

</head>

<body>

<div id="div">

    <span>a</span><span>b</span><span>c</span>

</div>

<script>

    (function(){

        var div = document.getElementById('div');

        var span = div.getElementsByTagName('span');

        for(var i = 0; i < span.length; i++){

            span[i].onclick = function(){

                if(this.className.length){

                    this.className = '';

                } else {

                    this.className = 'red';

                }

            }

        }

    }());

</script>

</body>

</html>