社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > html教程 > 如何变换颜色_html/css_WEB-ITnose

如何变换颜色_html/css_WEB-ITnose

WBOY
发布： 2016-06-21 09:03:49
原创
1059 人浏览过

这里有3个 

<span>a</span><span>b</span><span>c</span>
登录后复制

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


回复讨论(解决方案)

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

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';        }    }}
登录后复制
登录后复制

完整代码： 
        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>
登录后复制
登录后复制

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

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';        }    }}
登录后复制
登录后复制

完整代码： 
        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>
登录后复制
登录后复制


是这个效果     感谢大神
相关标签：
如何变换颜色
来源：php.cn
上一篇：图解CSS3 读书笔记--选择器_html/css_WEB-ITnose 下一篇：如何使用css实现文字一行居中，多行左对齐？_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
用 HTML 代码（从数组生成）替换字符串的顶级方法 给定一个像这样的字符串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何将子字符串#...
来自于 2024-04-06 17:40:41
0
2
410
如何使用 Vanilla JS 使用 clickEventListener 在红色和蓝色之间切换 首先，我创建两个函数蓝色和红色。functiondrawBlueCircle(){ctx.fillStyle='blue';ctx.beginPath();ctx.arc(mous...
来自于 2024-04-03 20:19:03
0
2
347
Ag-Grid：是否可以在计时器上设置行的样式，而不是基于行中的数据？ 我需要在一段时间后更改行的背景颜色。网格中有一列的时间以秒为单位，我需要在该时间过去50%后更改行颜色。网格中的数据本身并没有改变，因此使用rowClassRules似乎不起作用，...
来自于 2024-04-03 20:14:05
0
1
360
如何在 html 中为我的框赋予不同的颜色？ 附注我已经更新了该帖子，以使其更加清晰！如何为html中的框指定不同的颜色来标记内部和外部应用程序？我正在尝试将盒子标记为不同的颜色，作为内部外部应用程序的标记。然后这个html被...
来自于 2024-04-02 23:21:49
0
1
302
如何测试网站上的颜色变化？ 我想根据要求将10种特定颜色替换为新颜色（例如：#ddd替换为#000。像这样的不同替换）。我刚刚在所有css文件中找到并替换了300多个地方。现在，想在网站上测试是否所有颜色都正...
来自于 2024-04-01 15:21:14
0
1
244
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板