Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > 如何变换颜色_html/css_WEB-ITnose

如何变换颜色_html/css_WEB-ITnose

WBOY
Release： 2016-06-21 09:03:49
Original
1060 people have browsed it

这里有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
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
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
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
Copy after login


是这个效果     感谢大神
Related labels：
如何变换颜色
source：php.cn
Previous article：图解CSS3 读书笔记--选择器_html/css_WEB-ITnose Next article：如何使用css实现文字一行居中，多行左对齐？_html/css_WEB-ITnose
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
Latest Articles by Author
Latest Issues
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
How to switch between red and blue using clickEventListener using Vanilla JS First, I create two functions blue and red. functiondrawBlueCircle(){ctx.fillStyle='blue';...
From 2024-04-03 20:19:03
0
2
347
Ag-Grid: Is it possible to style a row on a timer, rather than based on the data in the row? I need to change the background color of rows after some time. There is a column in the gr...
From 2024-04-03 20:14:05
0
1
360
How can I give my box a different color in html? PS I've updated the post to be more clear! How to specify different colors for boxes in ht...
From 2024-04-02 23:21:49
0
1
302
How to test color changes on a website? I want to replace 10 specific colors with new colors as per requirement (eg: #ddd replaced...
From 2024-04-01 15:21:14
0
1
244
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template