Discussion :

[Rmodevv]

Bonjour,

n'étant pas du tout javascript, je bloque sur un problème de débutant...
Ma page HTML possède un bouton sur lequel j'aimerais affecter la fonction suivante, déclarée dans mon header :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function selection(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.font-weight == "bold")
{
targetElement.style.font-weight = "normal" ;
 
} else if (targetElement.style.font-weight == "normal") {
targetElement.style.font-weight = "bold" ;
}
}

Dans le body, voici mon bouton :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p id="boutonfev" style="font-weight:normal;"><a href="javascript:selection('boutonfev');">texte de mon bouton</a></p>

Pourtant cela ne fonctionne pas, j'ai beau cliquer sur mon bouton son style font-weight ne change jamais.

Merci anticipé pour vos pistes !

[Bovino]

En JavaScript, la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

targetElement.style.font-weight

signifie targetElement.style.font moins weight, ce qui n'a pas de sens...

Comment passer d'une propriété de style CSS à celle qui correspond en JavaScript ?

[Tendhor57]

En CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

font-weight

Devient en javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fontWeight

Ce qui nous donne chez toi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

targetElement.style.fontWeight

C'est aussi simple que ça

[SpaceFrog]

Merci tehdhor57 ...

c'est un peu ce que dit le lien de FAQ donné par Bovino

http://javascript.developpez.com/faq...css.javascript

[Rmodevv]

Okey okey, merci à tous pour vos réponses...

Je m'attendais à ce qu'elle soit simple, mais tout de même pas autant...

Bonne journée !

[sekaijin]

Bonjour,
...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p id="boutonfev" style="font-weight:normal;"><a href="javascript:selection('boutonfev');">texte de mon bouton</a></p>

...

Pas de pseudo protocole javascript

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p id="boutonfev" style="font-weight:normal;"><a href="#" onclick="selection('boutonfev'); return false;">texte de mon bouton</a></p>

et en utilisant pleinement la poo js
dans le onload

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var targetElement = document.getElementById('boutonfev') ;
 
targetElement.selection = function selection()
{
  if (this.style.fontWeight == "bold")
  {
    this.style.fontWeight = "normal" ;
  } else if (this.style.fontWeight == "normal") {
    this.style.fontWeight = "bold" ;
  }
}
 
targetElement.firstchild.onclick = function() {
   targetElement.selection();
   return false;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<p id="boutonfev" style="font-weight:normal;"><button>texte de mon bouton</button></p>

ainsi on ne fait qu'une seule fois la recherche de l'élément (et non à chaque click) et tout le js est dans un fichier js compilé la première fois je html reste du html basique.

A+JYT