cerhu > comp.lang.* > comp.lang.javascript

Thierry Loiseau (21/04/2019, 16h15)
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
Thierry Loiseau (21/04/2019, 18h03)
Thierry Loiseau <loiseauthierry> 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...
Thierry Loiseau (21/04/2019, 18h09)
Thierry Loiseau <loiseauthierry> wrote:

> Thierry Loiseau <loiseauthierry> 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="y ellow";
....
// Retablir l'état inital
document.getElementById("btn").style.background=sa uvetatbg;
Thierry Loiseau (21/04/2019, 19h25)
Thierry Loiseau <loiseauthierry> wrote:

> // Retablir l'état inital
> document.getElementById("btn").style.background=sa uvetatbg;


Plus simple :

document.getElementById("btn").style.background = '';
Y.D. (22/04/2019, 18h24)
Bonjour,

Le 21/04/2019 à 18:09, Thierry Loiseau a écrit :> Thierry Loiseau
<loiseauthierry> 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.backgroundCol or="blue";

devrait convenir.
Thierry Loiseau (22/04/2019, 22h53)
Y.D. <no-spam> 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.backgroundCol or="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 :)
Y.D. (23/04/2019, 10h51)
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 ;-)
Pierre Maurette (23/04/2019, 12h26)
Thierry Loiseau :
[..]
> 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.
Discussions similaires
Valeur par défaut d'un input type=file

Mise en forme par défaut !

[HS ? HTML : taille par défaut du INPUT type=text dans IE]

Remise en forme par défaut


Fuseau horaire GMT +2. Il est actuellement 11h14. | Privacy Policy