Mon projet paraît peut-être assez osé vu le peu d'expérience que j'ai mais j'ai vraiment envie de réussir ça.
En gros je voudrais faire un site où en cliquant sur un bouton ça changerais toute la couleur du site mais je sais pas comment changer la couleur du background de mon body en cliquant sur ce bouton parce que ça change juste la couleur de mon bouton un court instant avec un :active.
Mon but à la fin serais de faire plusieurs boutons avec du coup plusieurs choix de couleurs différents mais je voudrais déjà commencer avec une.
Mon but à la fin serais de faire plusieurs boutons avec du coup plusieurs choix de couleurs différents mais je voudrais déjà commencer avec une.
Tu peux sauvegarder le choix de l'utilisateur dans un cookies, si c'est la première fois que le visiteur vois la page (si cookies absent) tu en crées un avec valeur par défaut;
Si cookies présent, tu charges les valeurs en JS et tu modifies les styles des éléments choisis.
Autre option, réaliser plusieurs feuille de style et permettre le choix d'une ou l'autre par l'utilisateur. Sauvegarde de ce choix via cookies. A voir comment tu veux le réalisé.
et le code ci dessus pose un écouteur d'évenement sur un element bouton ( via addEventListener ) pour pouvoir executé une fonction à chaque click sur le bouton lors du click sur celui-ci s'est la fonction qui et donné en 2iem paramètre de addEventListener qui et exécuté
Est-ce qu'il est possible de customiser le bouton comme on en a la possibilité en css ?
Parce qu'on va pas se mentir un bouton comme celui-ci c'est pas joli.
Est-ce qu'il est aussi possible de customiser la façon dont ça change le fond ? Changer la couleur précisément et modifier les couleurs d'une classe css ?
SamuelGaborieau3 a écrit:
Bonjour, tu devras en Javascript posé un écouteur d'événement sur le bouton qui "change la couleur de fond au click"
pour pouvoir effectué une action lors d'un click de celui-ci.
et le code ci dessus pose un écouteur d'évenement sur un element bouton ( via addEventListener ) pour pouvoir executé une fonction à chaque click sur le bouton lors du click sur celui-ci s'est la fonction qui et donné en 2iem paramètre de addEventListener qui et exécuté
si tu veut appliqué des styles css spécifique lors du changement de background ce qui peut être intéressant ce serait d'appliqué une class spécifique en javascript plutôt que du css à la volé ( parce que le css en javascript et pas pratique à écrire et difficilement ré utilisable et plus long à chargé qu'une feuille de style )
dans la fonction de rappel plutôt que de changé le background directement tu pourras appliqué une class spécifique
maintenant lors du click sur le bouton cela ajoute la class bg-red à la balise body
il te faudra un fichier css qui répondent à cette class pour la mettre en forme
.bg-red {
background-color: #e74c3c;
/* ... */
}
"Est-ce qu'il est possible de customiser le bouton comme on en a la possibilité en css ?"
Est-ce que tu veut dire customisé avec Javascript ?
Oui ces possible de la même façon que pour la balise body,
et pour les même raison je te conseil de le faire depuis un fichier css.
Si tu veut changé le style du bouton lors du changement de background du body et bien sur le même principe tu peut préparé une selection dans un fichier css
/*
selectionne l'element avec l'id 'button-id'
situé à l'intérieur de l'élément avec la class 'bg-red'
*/
.bg-red #button-id {
/* ici la mise en forme du bouton lorsque que le background et "rouge" */
}
- Edité par SamuelGaborieau3 29 juillet 2020 à 15:57:18
Merci de ta réponse mais en réalité tu m'as mal compris, en fait je cherche à savoir si il est possible de modifier l'aspect du bouton javascript (comme on peut créer un "bouton" et le personnaliser en css ) Parce que le bouton qui est créé n'est pas joli et très petit, et j'aimerais bien savoir si il est possible de le personnaliser.
Merci quand même pour cette information qui me sera utile je n'y avait pas pensé.
SamuelGaborieau3 a écrit:
si tu veut appliqué des styles css spécifique lors du changement de background ce qui peut être intéressant ce serait d'appliqué une class spécifique en javascript plutôt que du css à la volé ( parce que le css en javascript et pas pratique à écrire et difficilement ré utilisable et plus long à chargé qu'une feuille de style )
dans la fonction de rappel plutôt que de changé le background directement tu pourras appliqué une class spécifique
maintenant lors du click sur le bouton cela ajoute la class bg-red à la balise body
il te faudra un fichier css qui répondent à cette class pour la mettre en forme
.bg-red {
background-color: #e74c3c;
/* ... */
}
"Est-ce qu'il est possible de customiser le bouton comme on en a la possibilité en css ?"
Est-ce que tu veut dire customisé avec Javascript ?
Oui ces possible de la même façon que pour la balise body,
et pour les même raison je te conseil de le faire depuis un fichier css.
Si tu veut changé le style du bouton lors du changement de background du body et bien sur le même principe tu peut préparé une selection dans un fichier css
/*
selectionne l'element avec l'id 'button-id'
situé à l'intérieur de l'élément avec la class 'bg-red'
*/
.bg-red #button-id {
/* ici la mise en forme du bouton lorsque que le background et "rouge" */
}
tu peut modifié sont apparence en CSS comme n'importe quelle boutton peut importe que tu l'est utilisé avec javascript ou pas.
#button-id {
/* la mise en forme css du boutton .... */
}
la seule chose qui peut casé ta mise en forme de l'élément en le manipulant avec Javascript c'est si tu supprime/modifié les sélécteur qui sont utilisé par ta mise en forme.
button.id = "nouveau-id";
l'exemple ci dessus change l'id du boutton et le css ne serais plus appliqué dessus.
- Edité par SamuelGaborieau3 1 août 2020 à 20:36:58
Rebonsoir , merci beaucoup c'est exactement ce que je voulais savoir.
J'espère réussir à faire ce que je souhaite faire grâce à tes conseils,quoi qu'il arrive tu m'a été d'une grande aide donc je te remercie encore une fois.
SamuelGaborieau3 a écrit:
Rebonjour,
" Merci de ta réponse mais en réalité tu m'as mal compris, en fait je cherche à savoir si il est possible de modifier l'aspect du bouton javascript "
Je ne suis pas bien sur de comprendre ta question: "bouton javascript" c'est un poil flou,
mais si tu parles du boutton que tu as selectionné en javascript
tu peut modifié sont apparence en CSS comme n'importe quelle boutton peut importe que tu l'est utilisé avec javascript ou pas.
#button-id {
/* la mise en forme css du boutton .... */
}
la seule chose qui peut casé ta mise en forme de l'élément en le manipulant avec Javascript c'est si tu supprime/modifié les sélécteur qui sont utilisé par ta mise en forme.
button.id = "nouveau-id";
l'exemple ci dessus change l'id du boutton et le css ne serais plus appliqué dessus.
- Edité par SamuelGaborieau3 il y a environ 1 heure
Bonjour, désolé de revenir sur ce sujet mais j'ai un petit problème...
La partie sur le body fonctionne très bien mais comment faire pour utiliser ça sur une autre balise ?
Pour t'expliquer plus clairement je te met ci-dessous mon code actuel
function changeColorBody(color) {
document.body.style.background = color;
}
function blue_Run() {
changeColorBody('blue');
}
Cela fonctionne très bien mais est-il possible de modifier le "body" du "document.body.style.background" et d'y mettre à la place une catégorie que j'ai créé en css (que je te met ci-dessous) ?
et le code ci dessus pose un écouteur d'évenement sur un element bouton ( via addEventListener ) pour pouvoir executé une fonction à chaque click sur le bouton lors du click sur celui-ci s'est la fonction qui et donné en 2iem paramètre de addEventListener qui et exécuté
Je t'invite à revoir la base de javascript poour poser ce genre de question ... On parle de la base de JS en sélectionnant des élements via un tag un id ou une classe.
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
Le cours de JavaScript sur openclassroom devrait t'aider
Je suis désolé mais ça m'aide absolument pas à la base je ne comptais pas faire de js et je ne m'y connais pas et honnêtement passer des heures sur les cours du site pour chercher à régler un seul problème ça me tente moyen
Je ne compte pas m'investir à fond dans le js tout de suite j'ai du en faire par défaut car ce que je souhaitais implémenter ne se fait qu'en js
Pourrais-tu m'expliquer comment ces trois lignes fonctionnent ou comment régler mon problème ?
ApoSkunz a écrit:
Je t'invite à revoir la base de javascript poour poser ce genre de question ... On parle de la base de JS en sélectionnant des élements via un tag un id ou une classe.
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
Le cours de JavaScript sur openclassroom devrait t'aider
Alors ce que tu souhaites faire en JS nécessite très peu d'apprentissage 1 ou à 2H max.
Je vais quand même t'expliquer la base du coups.
JS va principalement servir à cibler des éléments de ton document HTML déjà créés (sinon il faudra voir avec JQUERY).
Pour cibler un élément il existe diverse méthode:
document.getElementById('patate') --> va capturer mon élément de mon DOM HTML avec l'id patate (un id est je le rappelle unique)
document.getElementsByClassName('coucou') --> va capturer les éléments du DOM HTML avec la classe coucouc, c'est donc un array : on y accède avec document.getElementsByClassName('coucou')[index]
document.getElementsByTagName('div') --> va capturer les éléments du DOM dont le tag name est div, c'est un array aussi
après une fois que tu as sélectionné un élément en JS tu peux faire beaucoup de chose dessus : changer ses attributs, changer son contenu HTML, changer son style
pour changer son style, tu sélectionnes donc ton élément elmt et tu appliques : elmt.style.propertyJs = 'value';
propertyJS correspond au propriété CSS à l'exception des propriétés contenant un " - " -> qui deviennent une forme contractée comme .style.borderColor ou .style.backgroundColor
De plus pour les pseudo sélecteur CSS du style ::after :: before ou :hover il faudra appliquer une balise <style></style> dans le head de ta page HTML pour que les nouvelles propriétés soient prises en compte
Bonjour tu peut passé un selecteur css valide en deuxième paramètre a ta fonction qui change le background et utilisé un document.querySelector
du selecteur css pour appliqué le background dessus.
function changeColorBody(color, selector) {
// selector devrait être une chaîne de texte contenant un selecteur
// css valid, javascript selectionne le premier element qu'il trouve dans le document
const elementTarget = document.querySelector( selector );
// si le selecteur correspond à un élément dans le document
if( elementTarget ) {
elementTarget.style.background = color;
return true;
} else {
// ici le selector passé en argument 2, ne correspond à aucun
// élément dans le document
console.error( selector + ", n'existe pas dans le document" );
return false;
}
}
- Edité par SamuelGaborieau3 7 août 2020 à 2:14:05
suggestion de présentation.
Bouton qui change la couleur du background
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.
Le dev web est outil de création illimité.
Le dev web est outil de création illimité.
suggestion de présentation.