masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 如何变换颜色_html/css_WEB-ITnose

如何变换颜色_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-21 09:03:49
asal
1059 orang telah melayarinya

这里有3个 

<span>a</span><span>b</span><span>c</span>
Salin selepas log masuk

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


回复讨论(解决方案)

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

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';        }    }}
Salin selepas log masuk
Salin selepas log masuk

完整代码： 
        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>
Salin selepas log masuk
Salin selepas log masuk

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

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';        }    }}
Salin selepas log masuk
Salin selepas log masuk

完整代码： 
        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>
Salin selepas log masuk
Salin selepas log masuk


是这个效果     感谢大神
Label berkaitan：
如何变换颜色
sumber：php.cn
Artikel sebelumnya：图解CSS3 读书笔记--选择器_html/css_WEB-ITnose Artikel seterusnya：如何使用css实现文字一行居中，多行左对齐？_html/css_WEB-ITnose
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kaedah peringkat atas untuk menggantikan rentetan dengan kod HTML (dihasilkan daripada tatasusunan) Diberi rentetan seperti ini...$htmlPattern="Usernameis:#name#andusercompanyis#company...
daripada 2024-04-06 17:40:41
0
2
410
Cara bertukar antara merah dan biru menggunakan clickEventListener menggunakan Vanilla JS Pertama, saya mencipta dua fungsi biru dan merah. functiondrawBlueCircle(){ctx.fillStyle='...
daripada 2024-04-03 20:19:03
0
2
347
Ag-Grid: Adakah mungkin untuk menggayakan baris pada pemasa dan bukannya berdasarkan data dalam baris? Saya perlu menukar warna latar belakang baris selepas beberapa ketika. Terdapat lajur dala...
daripada 2024-04-03 20:14:05
0
1
360
Bagaimanakah saya boleh memberikan kotak saya warna yang berbeza dalam html? PS Saya telah mengemas kini siaran untuk lebih jelas! Bagaimana untuk menentukan warna yan...
daripada 2024-04-02 23:21:49
0
1
302
Bagaimana untuk menguji perubahan warna pada tapak web? Saya ingin menggantikan 10 warna tertentu dengan warna baharu mengikut keperluan (cth: #dd...
daripada 2024-04-01 15:21:14
0
1
244
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan