JS CSS : impossible de styler un href ?

**ClarusAD** · 03/02/2016, 13h23

Salut,
Voilà un truc de ouf : pourquoi est-il impossible, via JavaScript, de récupérer la valeur de l'attribut color d'une balise href ?

Comment faites-vous ?

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
17
18
<!DOCTYPE html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
	function monalerte(coucou) {
		var toto = document.getElementById(coucou).style.color ;
		alert(toto);
		}
</script>
<style>
	a:link, a:active, a:visited {color:black;}
	a:hover {color:rgb(000,000,255);}
</style>
</head>
<body>
	<a href="#" id="monid" onMouseOver="monalerte(this.id);">mon lien</a>
</body>

Merci.

**Watilin** · 03/02/2016, 22h43

Il y a deux raisons.

La première, c'est qu'en JavaScript, la propriété style reflète l'attribut HTML style d'un élément donné. J'emploie les mots propriété et attribut dans un sens précis : la propriété est ce que tu manipules en JavaScript ; l'attribut est ce qui se trouve dans le code HTML. La propriété className reflète l'attribut class.

Par exemple, si tu as ce code HTML :

Code html :

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

<a style="color: green">lien</a>

En consultant sa propriété style dans la console F12, on obtient ceci :

Code JS :

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

1
2
>> document.querySelector("a").style
CSS2Properties { color: "green" }

L'attribut style n'est qu'une partie de l'ensemble des styles appliqués à l'élément. C'est au moteur CSS de déterminer cet ensemble. JavaScript n'a, de base, pas connaissance de toutes les informations de style de chaque élément, car ça demanderait trop de temps de calcul. Il existe des situations où le moteur JS fait appel au moteur CSS : quand tu accèdes à une propriété du genre clientWidth, offsetLeft, etc. ou quand tu le demandes explicitement à l'aide de la fonction getComputedStyle :

Code JS :

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

1
2
3
4
>> getComputedStyle(document.querySelector("a"))
CSS2Properties { align-content: "stretch", align-items: "stretch", align-self: "stretch", animation-delay: "0s",
animation-direction: "normal", animation-duration: "0s", animation-fill-mode: "none", animation-iteration-count: "1",
animation-name: "none", animation-play-state: "running", 227 de plus… }

(Comme tu peux le voir, ça fait beaucoup de règles de style.)
En faisant ceci, tu peux accéder à la règle color effectivement appliquée à ton lien. Mais ça ne correspondra pas forcément à sa véritable couleur, et cela à cause de la… Seconde raison.

La seconde raison concerne uniquement la pseudoclasse :visited. Les navigateurs donnent toujours la couleur d'un lien comme s'il n'était pas visité, car sa véritable couleur ferait fuiter une information sur la vie privée de l'utilisateur.
Imagine que tu visites une page sur laquelle il y a des liens vers des sites sensibles (contenu adulte, opposition politique, etc.), et que le script de cette page est en mesure de dire lesquels tu as visités. Pire, il peut envoyer cette information via Ajax vers une base de données. C'était une faille de sécurité qui a été corrigée en 2011. Voir : Privacy and the :visited Selector

**SpaceFrog** · 04/02/2016, 09h11

A savoir également que les balises a sont des balises particulières qui héritent de styles particuliers pour des raison ergonomiques, mise en exergue du lien, du survol du lien , lien visité ...

ces style se gèrent en css avec les pseudo classes :hover, :link, :visited pour overrider les style d'ergonomie du navigateur

**ClarusAD** · 05/02/2016, 08h05

Merci Watilin pour ces explications très précises.

JS CSS : impossible de styler un href ?

JavaScript

Discussions similaires

Partager

Partager