communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 如何变换颜色_html/css_WEB-ITnose

如何变换颜色_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-21 09:03:49
original
1059 Les gens l'ont consulté

这里有3个 

<span>a</span><span>b</span><span>c</span>
Copier après la connexion

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


回复讨论(解决方案)

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

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';        }    }}
Copier après la connexion
Copier après la connexion

完整代码： 
        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>
Copier après la connexion
Copier après la connexion

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

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';        }    }}
Copier après la connexion
Copier après la connexion

完整代码： 
        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>
Copier après la connexion
Copier après la connexion


是这个效果     感谢大神
Étiquettes associées：
如何变换颜色
source：php.cn
Article précédent：图解CSS3 读书笔记--选择器_html/css_WEB-ITnose Article suivant：如何使用css实现文字一行居中，多行左对齐？_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Comment basculer entre le rouge et le bleu à l'aide de clickEventListener à l'aide de Vanilla JS Tout d'abord, je crée deux fonctions bleue et rouge. functiondrawBlueCircle(){ctx.fillStyl...
Depuis 2024-04-03 20:19:03
0
2
347
Ag-Grid : Est-il possible de styliser une ligne sur une minuterie plutôt que sur la base des données de la ligne ? Je dois changer la couleur d'arrière-plan des lignes après un certain temps. Il y a une co...
Depuis 2024-04-03 20:14:05
0
1
360
Comment puis-je donner à ma boîte une couleur différente en HTML ? PS : j'ai mis à jour le message pour être plus clair ! Comment spécifier différentes coule...
Depuis 2024-04-02 23:21:49
0
1
302
Comment tester les changements de couleurs sur un site internet ? Je souhaite remplacer 10 couleurs spécifiques par de nouvelles couleurs selon les besoins ...
Depuis 2024-04-01 15:21:14
0
1
244
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal