gratifiant > 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 :
[..]
> 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