IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Changer la couleur du background puis la couleur du texte


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 250
    Par défaut Changer la couleur du background puis la couleur du texte
    Bonsoir

    Je désire changer la couleur du background et la couleur du texte
    via un bouton

    Nom : screen.jpg
Affichages : 211
Taille : 3,9 Ko

    mon code:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
                <div class="fond">
                        <p>Dark</p> 
                              <div class="barre" id="barre">
                                    <div class="boule" id="boule"></div>
                              </div>
                         <p>Light</p>
                </div>

    code JS:

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
            const btn=document.getElementById('barre');
            const boule=document.getElementById('boule');
     
            let status=0;
     
            btn.addEventListener('click', toggleMode)
     
            function toggleMode(){
                if(status === 0){
                    document.documentElement.style.setProperty('--bg-color', 'white')
                    document.documentElement.style.setProperty('--text-color', 'black')
                }
            }

    mais ce ne marche pas

    Pourrais-je avoir des pistes en vue de résoudre mon problème ?

    Merci.

  2. #2
    Membre chevronné Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Par défaut
    Salut labarre2002,

    Et en ajoutant ou en supprimant une class dans ta balise.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .fond {
                background: #ffffff;
                color: #000;
            }
     
            .fonddark {
                background: black;
                color: #ffffff;
            }
     
            input[type='checkbox'], label {
                width: 40px;
                height: 40px;
                cursor: pointer;
                font-size: 2em;
                vertical-align: sub;
                user-select: none;
            }
        </style>
     
    </head>
     
    <body>
        <div class="fond">
            <p>Dark</p>
            <div class="barre" id="barre">
                <div class="boule" id="boule"></div>
            </div>
            <p>Light</p>
     
            <label><input type="checkbox">WHITE or BLACK</label>
        </div>`
        </div>
     
        <script>
            const switchSelect = document.getElementsByClassName('switch')[0]
            const fond = document.getElementsByClassName('fond')[0]
     
            switchSelect.addEventListener('change', () => {
                switchSelect.querySelector('input').checked === false ? fond.classList.remove('fonddark') : fond.classList.add('fonddark')
            })
     
        </script>
    </body>
     
    </html>

    J'ai rajouté une balise input checkbox pour l'exemple.

  3. #3
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 250
    Par défaut
    @ASCIIDEFOND

    Merci pour ton méssage

  4. #4
    Membre très actif
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    744
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 80
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 744
    Par défaut
    ou ça

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    document.documentElement.style.backgroundColor='white'
             document.documentElement.style.color='black'
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>  
     
            input[type='checkbox'], label {
                width: 40px;
                height: 40px;
                cursor: pointer;
                font-size: 2em;
                vertical-align: sub;
                user-select: none;
            }
                    
                    .boule{
                    background:red;
                    height:20px;
                    width:20px;
                    border-radius:10px;
                    }
                    
                    .barre{
                    background:gray;
                    height:20px;
                    width:60px;
                    border-radius:10px
                    }
                    
        </style>
    	<script>
            
            addEventListener('load', () => {
            
                    document.getElementById('boule').style.transition="all 0.2s ease-out"
                    
                    document.documentElement.style.transition="all 0.5s ease-out"
     
            document.getElementById('switch').addEventListener('click', () => {
                    
                    var el=document.documentElement
                    
                    if(el.style.backgroundColor=='white' || el.style.backgroundColor==""){
                            el.style.backgroundColor='black'
                            el.style.color="white"
                            document.getElementById('boule').style.marginLeft="70%"
                    }
                    else{
                el.style.backgroundColor='white'
                            el.style.color="black"
                            document.getElementById('boule').style.marginLeft="0%"
                            }
            })
            })
     
        </script>
     
    </head>
     
    <body>
     
    	<label>WHITE or BLACK</label>
    <div class="fond">
    		<p>Dark</p>
    		<div class="barre" id='switch'>
    			<div class="boule" id="boule"></div>
    		</div>
    		<p>Light</p>
    </div>
     
    </body>
    </html>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 06/03/2008, 15h48
  2. [disabled]Changer la couleur du texte
    Par ozzmax dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 18/01/2006, 21h09
  3. [DropDownList] changer la couleur du texte
    Par Scorff dans le forum ASP.NET
    Réponses: 39
    Dernier message: 30/08/2005, 14h30
  4. Réponses: 2
    Dernier message: 03/02/2005, 23h42
  5. Changer la couleur du texte lors passage souris sur un TD !
    Par Kokito dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/01/2005, 15h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo