Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Forme par défaut d'un boutton input

Forme par défaut d'un boutton input

7 réponses
Avatar
loiseauthierry
Bonjour,

Soit un boutton input et le code suivant :

<input type="button" value="cliquez ici" id="btn">

Si via JavaScript je change la couleur :

document.getElementById("btn").style.color="blue";

la forme même du boutton devient rectangulaire.

J'aimerais pouvoir :

1) soit conservé la forme d'origine lorsque je modifie la couleur ;
2) sot pouvoir "réinitialiser" la forme d'origine avec la couleur
prédéfinie.

Je ne vois pas si c'est possible. Ma configuration :

FireFox 66 Mac OS X 10.9.5

Merci et bon dimanche


--
* * __*__ *
* * * -----oOOo--- O ---oOOo------- * *
http://astrophoto.free.fr *
* * -------- oOOo oOOo ---------- *
Signaler un problème avec ce contenu

7 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
loiseauthierry
Thierry Loiseau wrote:
document.getElementById("btn").style.color="blue";
la forme même du boutton devient rectangulaire.

Oups ! Ce n'est pas color mais background qui change la forme...
--
* * __*__ *
* * * -----oOOo--- O ---oOOo------- * *
http://astrophoto.free.fr *
* * -------- oOOo oOOo ---------- *
Avatar
loiseauthierry
Thierry Loiseau wrote:
Thierry Loiseau wrote:
document.getElementById("btn").style.color="blue";
la forme même du boutton devient rectangulaire.

Oups ! Ce n'est pas color mais background qui change la forme...

J'ai trouvé cet astuce en testant :
// Etat inital du background
sauvetatbg = document.getElementById("btn").style.background;
...
// Modification du background
document.getElementById("btn").style.background="yellow";
...
// Retablir l'état inital
document.getElementById("btn").style.background=sauvetatbg;
--
* * __*__ *
* * * -----oOOo--- O ---oOOo------- * *
http://astrophoto.free.fr *
* * -------- oOOo oOOo ---------- *
Avatar
loiseauthierry
Thierry Loiseau wrote:
// Retablir l'état inital
document.getElementById("btn").style.background=sauvetatbg;

Plus simple :
document.getElementById("btn").style.background = '';
--
* * __*__ *
* * * -----oOOo--- O ---oOOo------- * *
http://astrophoto.free.fr *
* * -------- oOOo oOOo ---------- *
Avatar
Y.D.
Bonjour,
Le 21/04/2019 à 18:09, Thierry Loiseau a écrit :> Thierry Loiseau
wrote:
document.getElementById("btn").style.color="blue";



Change donc la couleur du texte de l’élément.
la forme même du boutton devient rectangulaire.

Oups ! Ce n'est pas color mais background qui change la forme...


background est complexe, il agrège plusieurs propriétés. Si tu ne
veux que changer la couleur de fond :
document.getElementById("btn").style.backgroundColor="blue";
devrait convenir.
--
YD
Avatar
loiseauthierry
Y.D. wrote:
Oups ! Ce n'est pas color mais background qui change la forme...

background est complexe, il agrège plusieurs propriétés. Si tu ne
veux que changer la couleur de fond :
document.getElementById("btn").style.backgroundColor="blue";
devrait convenir.

Malheureusement, non... Même résultat :( J'avais déjà essayé. Il s'agit
du boutton [Jours fériés]
<http://astrophoto.free.fr/calculs/index.htm?201904211200>
Pas trop grave. Agaçant, mais pas trop grave :)
--
* * __*__ *
* * * -----oOOo--- O ---oOOo------- * *
http://astrophoto.free.fr *
* * -------- oOOo oOOo ---------- *
Avatar
Y.D.
Le 22/04/2019 à 22:53, Thierry Loiseau a écrit :
Pas trop grave. Agaçant, mais pas trop grave :)

Ce n’est pas lié au JS, mais apparemment à la conception
des navigateurs pour que l’aspect du bouton **standard **
corresponde à celui de l’OS. Le rendu n’est d’ailleurs
pas le même avec Windows, Gnome/Linux…
Le seul contournement que je connaisse est de styler les
boutons, par exemple :
input[type=button] {
text-align: center;
border: 1px solid gray;
border-radius: 3px;
padding: 2px 4px;
}
La modification par script sera alors possible sans
modifier l’aspect global des boutons, sauf si c’est
l’objet du script ;-)
--
Y.D.
Avatar
Pierre Maurette
Thierry Loiseau :
Bonjour,
Soit un boutton input et le code suivant :
<input type="button" value="cliquez ici" id="btn">
Si via JavaScript je change la couleur :
document.getElementById("btn").style.color="blue";
la forme même du boutton devient rectangulaire.
J'aimerais pouvoir :
1) soit conservé la forme d'origine lorsque je modifie la couleur ;
2) sot pouvoir "réinitialiser" la forme d'origine avec la couleur
prédéfinie.
Je ne vois pas si c'est possible. Ma configuration :
FireFox 66 Mac OS X 10.9.5
Merci et bon dimanche

Bjr,
Vous placez quelques styles de base dans votre css (par exemple dans
les quelques lignes dans le <head></head>:
.bg-blue{background: blue;}
etc.
(background avec juste une couleur fonctionne aussi bien que
background-color)
Puis en js:
document.getElementById("btn").classList.add("bg-blue");
Il y a un hack pas compliqué pour que ça fonctionne aussi avec les
vieux IE, mais je ne vois pas pourquoi il y aurait encore des
utilisateurs IE plus petit que 10, et de toutes façons ils seraient
juste privés de la couleur, ça leur apprendra.
--
Pierre Maurette