Est-il possible de sélectionner des éléments en CSS par leurs attributs de données HTML5 (par exemple, data-role
)?
Est-il possible de sélectionner des éléments en CSS par leurs attributs de données HTML5 (par exemple, data-role
)?
Réponses:
Si vous voulez dire utiliser un sélecteur d'attribut , pourquoi pas:
[data-role="page"] {
/* Styles */
}
Il existe une variété de sélecteurs d'attributs que vous pouvez utiliser pour différents scénarios, qui sont tous couverts dans le document auquel je renvoie. Notez que, bien que les attributs de données personnalisés soient une "nouvelle fonctionnalité HTML5",
les navigateurs n'ont généralement aucun problème à prendre en charge les attributs non standard, vous devriez donc être en mesure de les filtrer avec des sélecteurs d'attributs; et
vous n'avez pas non plus à vous soucier de la validation CSS, car CSS ne se soucie pas des noms d'attributs non espacés tant qu'ils ne cassent pas la syntaxe du sélecteur.
$("#element").data("field","value");
cela ne change pas la valeur des attributs de données, il modifie uniquement la version mise en cache du DOM par jQuery. Afin de changer l'attribut DOM réel, il faut utiliser $("#element").attr("data-field","value");
. Rendre mon commentaire d'origine invalide.
Il est également possible de sélectionner des attributs quel que soit leur contenu, dans les navigateurs modernes
avec:
[data-my-attribute] {
/* Styles */
}
[anything] {
/* Styles */
}
Par exemple: http://codepen.io/jasonm23/pen/fADnu
Fonctionne sur un pourcentage très important de navigateurs.
Notez que cela peut également être utilisé dans un sélecteur JQuery, ou en utilisant document.querySelector
^=
, *=
et $=
) sont également pris en charge par IE7 et IE8. Peut-être qu'ils ont été introduits dans IE avant d'être standardisés.
Il convient de noter les sélecteurs d'attributs de sous-chaîne CSS3
[attribute^=value] { /* starts with selector */
/* Styles */
}
[attribute$=value] { /* ends with selector */
/* Styles */
}
[attribute*=value] { /* contains selector */
/* Styles */
}
Vous pouvez combiner plusieurs sélecteurs et c'est tellement cool de savoir que vous pouvez sélectionner chaque attribut et attribut en fonction de leur valeur comme en href
fonction de leurs valeurs avec CSS uniquement ..
Les sélecteurs d'attributs vous permettent de jouer avec des attributs supplémentaires id
etclass
Voici une lecture impressionnante sur les sélecteurs d'attributs
a[href="http://aamirshahzad.net"][title="Aamir"] {
color: green;
text-decoration: none;
}
a[id*="google"] {
color: red;
}
a[class*="stack"] {
color: yellow;
}
<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>
Prise en charge du navigateur:
IE6 +, Chrome, Firefox et Safari
Vous pouvez vérifier les détails ici .
[data-value] {
/* Attribute exists */
}
[data-value="foo"] {
/* Attribute has this exact value */
}
[data-value*="foo"] {
/* Attribute value contains this value somewhere in it */
}
[data-value~="foo"] {
/* Attribute has this value in a space-separated list somewhere */
}
[data-value^="foo"] {
/* Attribute value starts with this */
}
[data-value|="foo"] {
/* Attribute value starts with this in a dash-separated list */
}
[data-value$="foo"] {
/* Attribute value ends with this */
}