如何变换颜色_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

回复讨论(解决方案)

Home

Web Front-end

HTML Tutorial

如何变换颜色_html/css_WEB-ITnose

Jun 21, 2016 am 09:03 AM

这里有3个

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

Copy after login

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

回复讨论(解决方案)

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

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';        }    }}

Copy after login

完整代码：

        test        <span>a</span><span>b</span><span>c</span>
<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>

Copy after login

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

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';        }    }}

Copy after login

完整代码：

        test        <span>a</span><span>b</span><span>c</span>
<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>

Copy after login

是这个效果感谢大神

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn