jQuery => Manipulation 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.

Définir la propriété CSS

Définition d'un seul style:

$('#target-element').css('color', '#000000');

Définition de plusieurs styles en même temps:

$('#target-element').css({
    'color': '#000000',
    'font-size': '12pt',
    'float': 'left',
});

Obtenir la propriété CSS

Pour obtenir la propriété CSS d'un élément, vous pouvez utiliser la méthode .css(propertyName) :

var color    = $('#element').css('color');
var fontSize = $('#element').css('font-size');

Incrémenter / Décrémenter les propriétés numériques

Les propriétés CSS numériques peuvent être incrémentées et décrémentées avec la syntaxe += et -= , respectivement, en utilisant la méthode .css() :

  // Increment using the += syntax
  $("#target-element").css("font-size", "+=10");
  
  // You can also specify the unit to increment by
  $("#target-element").css("width", "+=100pt");
  $("#target-element").css("top", "+=30px");
  $("#target-element").css("left", "+=3em");
  
  // Decrementing is done by using the -= syntax
  $("#target-element").css("height", "-=50pt");

CSS - Getters et Setters

CSS Getter

La fonction getter .css() peut être appliquée à chaque élément DOM de la page comme suit:

// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer, 
// refer to `$.width()` method
$("body").css("width");

Cette ligne renverra la largeur calculée de l'élément spécifié, chaque propriété CSS que vous fournissez entre parenthèses donnera la valeur de la propriété pour cet élément DOM $("selector") , si vous demandez un attribut CSS qui n'existe pas sera undefined comme une réponse.

Vous pouvez également appeler le getter CSS avec un tableau d'attributs:

$("body").css(["animation","width"]);

Cela retournera un objet de tous les attributs avec leurs valeurs:

Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}

Setter CSS

La méthode setter .css() peut également être appliquée à chaque élément DOM de la page.

$("selector").css("width", 500);

Cette instruction définit la width du $("selector") sur 500px et renvoie l'objet jQuery pour que vous puissiez chaîner plus de méthodes au sélecteur spécifié.

Le setter .css() peut également être utilisé en passant un objet de propriétés CSS et des valeurs telles que:

$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});

Toutes les modifications apportées par le dispositif de réglage sont ajoutées à la propriété de style élément DOM style affectant ainsi les styles des éléments (à moins que la valeur de la propriété de style ne soit déjà définie comme !important ailleurs dans les styles).

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

jQuery
Manipulation CSS

Recherche…