Forme par défaut d'un boutton input

Le
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 - *
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
loiseauthierry
Le #26514826
Thierry Loiseau
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 ---------- *
loiseauthierry
Le #26514825
Thierry Loiseau
Thierry Loiseau
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 ---------- *
loiseauthierry
Le #26514829
Thierry Loiseau
// 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 ---------- *
Y.D.
Le #26514885
Bonjour,
Le 21/04/2019 à 18:09, Thierry Loiseau a écrit :> Thierry Loiseau
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
loiseauthierry
Le #26514894
Y.D.
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]
Pas trop grave. Agaçant, mais pas trop grave :)
--
* * __*__ *
* * * -----oOOo--- O ---oOOo------- * *
http://astrophoto.free.fr *
* * -------- oOOo oOOo ---------- *
Y.D.
Le #26514911
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.
Pierre Maurette
Le #26514923
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
Publicité
Poster une réponse
Anonyme