jQueryManipulation CSS


Syntaxe

  • .css (cssProperty) // Récupère la valeur de la propriété CSS rendue
  • .css ([cssProperty, ...]) // Récupère les valeurs du tableau de cssProperties
  • .css (cssProperty, valeur) // Définir la valeur
  • .css ({cssProperty: value, ...}) // Définit les propriétés et les valeurs
  • .css (cssProperty, function) // Exposer le cssProperty à une fonction de rappel

Remarques

Valeurs rendues

Si une unité réactive est utilisée (comme "auto" , "%" , "vw" etc.), .css() renverra la valeur réelle rendue en px

.myElement{ width: 20%; }
var width = $(".myElement").css("width"); // "123px" 

Mise en forme des propriétés et des valeurs

Les propriétés peuvent être définies en utilisant le formatage CSS standard en tant que chaîne ou en utilisant camelCase

"margin-bottom"
marginBottom

Les valeurs doivent être exprimées en chaîne. Les valeurs numériques sont traitées comme des unités px interne par jQuery

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

A partir de jQuery 3, évitez d'utiliser .show() et .hide()

Selon cet article de blog jQuery , en raison de problèmes de performances et de surcharge, vous ne devriez plus utiliser .show() ou .hide() .

Si vous avez des éléments dans une feuille de style qui sont définis pour display: none , la méthode .show() ne remplacera plus cela. La règle la plus importante pour passer à jQuery 3.0 est la suivante: n'utilisez pas de feuille de style pour définir l' display: none par défaut display: none et essayez ensuite d'utiliser .show() - ou toute méthode .slideDown() éléments, tels que .slideDown() et .fadeIn() - pour le rendre visible. Si vous avez besoin de masquer un élément par défaut, le meilleur moyen est d'ajouter un nom de classe comme «caché» à l'élément et de définir cette classe comme étant display: none dans une feuille de style. Vous pouvez ensuite ajouter ou supprimer cette classe à l'aide des .addClass() et .removeClass() jQuery pour contrôler la visibilité. Alternativement, vous pouvez avoir un appel au gestionnaire .ready() .hide() sur les éléments avant qu'ils ne soient affichés sur la page. Ou, si vous devez conserver la valeur par défaut de la feuille de style, vous pouvez utiliser .css("display", "block") (ou la valeur d'affichage appropriée) pour remplacer la feuille de style.

Manipulation CSS Exemples Liés