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