11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery : récupérer style CSS à partir d'un sélecteur

Bonjour,

J'aimerais savoir si il existe une fonction en jQuery qui permet de récupérer et de stocker dans une variable un style CSS à partir d'un sélecteur.

Exemple de fonctionnement :

a:hover {
     color: #f44fff;
}

var valeurAHover = $("a:hover").getStyle();
alert(valeurAHover); // Affiche #f44fff


C'est déjà possible en Javascript sans framework : http://catcode.com/dominfo/getstyle2.html

Merci.
Modifié par Chok71 (26 Aug 2014 - 10:49)
Je ne pense pas que cela soit possible.

Par contre il doit y avoir l'événement "hover" mais cela dépend de ce que tu souhaites faire.
Salut,
Regardes getComputedStyle :
https://developer.mozilla.org/fr/docs/DOM/window.getComputedStyle

function recupStyle(elem, propriete){
    var prop = window.getComputedStyle(elem,null).getPropertyValue(propriete);
   return prop;
}

alert(recupStyle("ton element a","La propriété dont tu souhaite connaitre la valeur");


Et en jquery : .css
http://jquery.developpeur-web2.com/documentation/css/css.php => en français
http://api.jquery.com/css/ => en anglais

Pour finir un petit test de performance entre les deux :
http://jsperf.com/jquery-css-vs-getcomputedstyle/2

++++
Merci !

Mais la fonction en jQuery css() ne fonctionne pas sur les :hover. J'ai essayé la fonction getComputedStyle et ça ne fonctionne pas non plus.

Cordialement
salut,
je ne pense pas non plus que tu puisses récupérer la valeur d'un ":hover" via des méthodes simples comme getComputedStyle.
Tu peux par contre accéder à ton fichier CSS avec "document.styleSheets". Il te renvoi sous forme de tableau tous les fichiers CSS dans l'ordre, tu peux par la suite cibler la Nième propriété d'un fichier avec ".cssRules" (ou ".rules" pour les vieux IE). Cela suppose que tu connais l'ordre des fichiers CSS chargés et aussi celle des propriétés.

Exemple : à supposer que ce CSS est le premier fichier style chargé
body {
	margin:0;
}

a {
	text-decoration:none;
}

a:hover {
     color: #f44fff;
}


var css = document.styleSheets[0].cssRules[2].style.color;


EDIT: il faut savoir que sur Chrome en local, tu ne pourras pas accéder à tes fichiers CSS mais cela marche une fois en ligne.
Modifié par Zelalsan (26 Aug 2014 - 08:23)
Sujet clos
Aller à