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 :

modifier un gradient en javascript


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Terminal S
    Inscrit en
    Janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Terminal S

    Informations forums :
    Inscription : Janvier 2019
    Messages : 5
    Points : 6
    Points
    6
    Par défaut modifier un gradient en javascript
    Bonjour ,
    actuellement en terminal je suis sûr un projet final , dans celui-ci j'ai un gradient (initialement du noir vers le gris) que je voudrais changer (noir vers rouge par exemple) en appuyant sur une touche
    voici mon code javascript:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function keyPressed(){
    	 if(keyCode == 122){
                  alert("si tu vois ce message la fonction c'est bien lancé");
                  document.getElementById("page").style.background="radialGradient(black,black,red)";
    	}
    }
    Dans mon html j'ai donné une id à la balise html <html id="page"> et dans le css j'ai :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    html {
    	height: 100%;
    	background: radial-gradient(black,black,#0b46a3);
    	background-repeat: no-repeat;
     }



    Ps: j'ai entièrement conscience que on ne donne jamais d'id à une balise html mais plutôt au body ainsi que mon code est sûrement horrible mais j'ai tout codé et ça fonctionne et ici je ne m'intéresse que de comment modifier mon radial-gradient en java ( désolé pour les fautes )
    merci de votre aide.

  2. #2
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 067
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 067
    Points : 17 152
    Points
    17 152
    Par défaut
    Salut

    Je crois me rappeler qu'il faut passer document.getElementById("page").style.backgroundImage=......
    plutôt que document.getElementById("page").style.background=.....
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Terminal S
    Inscrit en
    Janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Terminal S

    Informations forums :
    Inscription : Janvier 2019
    Messages : 5
    Points : 6
    Points
    6
    Par défaut
    Citation Envoyé par ProgElecT Voir le message
    Salut

    Je crois me rappeler qu'il faut passer document.getElementById("page").style.backgroundImage=......
    plutôt que document.getElementById("page").style.background=.....
    Tout d'abord merci de ta réponse , j'ai remplacé et voici mon nouveau code javascript :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function keyPressed(){
    	 if(keyCode == 122){
                document.getElementById("page").style.backgroundImage="radialGradient(black,black,red)";
    }

    j'avais déjà cru comprendre que le gradient est considéré comme une image mais cette solution n'a pas marché
    merci.

  4. #4
    Modérateur
    Avatar de ProgElecT
    Homme Profil pro
    Retraité
    Inscrit en
    Décembre 2004
    Messages
    6 067
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Haute Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Décembre 2004
    Messages : 6 067
    Points : 17 152
    Points
    17 152
    Par défaut
    Re
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("page").style.backgroundImage="radial-gradient(black,black,red)";
    Soyez sympa, pensez -y
    Balises[CODE]...[/CODE]
    Balises[CODE=NomDuLangage]...[/CODE] quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Balises[C]...[/C] code intégré dans une phrase.
    Balises[C=NomDuLangage]...[/C] code intégré dans une phrase quand vous mettez du code d'un autre langage que celui du forum ou vous postez.
    Le bouton en fin de discussion, quand vous avez obtenu l'aide attendue.
    ......... et pourquoi pas, pour remercier, un pour celui/ceux qui vous ont dépannés.
    👉 → → Ma page perso sur DVP ← ← 👈

  5. #5
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Regarde bien la réponse de ProgElecT, il y a une différence dans les noms de propriétés selon qu'on les utilise en CSS ou en JS, regarde ces liens :

    - Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?
    - Quelle est la correspondance d'un attribut CSS en JavaScript ?

    Citation Envoyé par McNova Voir le message

    Ps: j'ai entièrement conscience que on ne donne jamais d'id à une balise html mais plutôt au body ainsi que mon code est sûrement horrible mais...
    Oui mais c'est inutile, tu n'as pas besoin d'ID... Pour accéder au body tu peux faire document.body... Et pour ton pb : document.body.style.backgroundImage="radial-gradient(black,black,red)"; et cela fonctionne...

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Terminal S
    Inscrit en
    Janvier 2019
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Terminal S

    Informations forums :
    Inscription : Janvier 2019
    Messages : 5
    Points : 6
    Points
    6
    Par défaut
    Merci pour votre aide , ça marche nickel !

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

Discussions similaires

  1. Modifier un treeview en javascript
    Par snake755 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 23/10/2008, 12h52
  2. Lien modifiant contenu page web - Javascript
    Par annekeuss dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 27/03/2007, 19h10
  3. Modifier des styles en javascript
    Par vraipolite dans le forum Général JavaScript
    Réponses: 19
    Dernier message: 02/04/2006, 18h20
  4. modifier un tableau avec javascript
    Par lemmings dans le forum Général JavaScript
    Réponses: 27
    Dernier message: 15/11/2005, 11h10
  5. [struts] : modifier un champ en javascript
    Par richard_34b dans le forum Struts 1
    Réponses: 3
    Dernier message: 02/10/2004, 01h42

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