jQuery => Manipolazione CSS

Sintassi

.css (cssProperty) // Ottieni il valore della proprietà CSS reso
.css ([cssProperty, ...]) // Ottieni valori da Array di cssProperties
.css (cssProperty, value) // Imposta valore
.css ({cssProperty: value, ...}) // Imposta proprietà e valori
.css (cssProperty, function) // Esporre la proprietà cssProperty a una funzione di callback

Osservazioni

Valori resi

Se viene utilizzata un'unità reattiva (come "auto" , "%" , "vw" ecc.), .css() restituirà il valore di rendering effettivo in px

.myElement{ width: 20%; }

var width = $(".myElement").css("width"); // "123px"

Formattazione di proprietà e valori

Le proprietà possono essere definite usando la formattazione CSS standard come String o usando camelCase

"margin-bottom"
marginBottom

I valori dovrebbero essere espressi in stringa. I valori numerici vengono trattati come unità px internamente da jQuery

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

Come di jQuery 3 evita di utilizzare .show() e .hide()

Secondo questo jQuery post sul blog , a causa di problemi ambientali e di prestazioni, non dovrebbe più utilizzare .show() o .hide() .

Se sono presenti elementi in un foglio di stile che sono impostati per la display: none , il metodo .show() non lo sovrascriverà più. Quindi la regola più importante per passare a jQuery 3.0 è questa: Non usare un foglio di stile per impostare il valore predefinito di display: none e quindi provare a usare .show() - o qualsiasi metodo che mostri elementi, come .slideDown() e .fadeIn() - per renderlo visibile. Se è necessario nascondere un elemento per impostazione predefinita, il modo migliore è aggiungere un nome di classe come "nascosto" all'elemento e definire la classe da display: none in un foglio di stile. Quindi puoi aggiungere o rimuovere quella classe usando i .addClass() e .removeClass() jQuery per controllare la visibilità. In alternativa, puoi avere un gestore .ready() chiamata .hide() sugli elementi prima che vengano visualizzati nella pagina. Oppure, se è necessario mantenere il default del foglio di stile, è possibile utilizzare .css("display", "block") (o il valore di visualizzazione appropriato) per sovrascrivere il foglio di stile.

Imposta la proprietà CSS

Impostazione di un solo stile:

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

Impostazione di più stili allo stesso tempo:

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

Ottieni la proprietà CSS

Per ottenere la proprietà CSS di un elemento è possibile utilizzare il metodo .css(propertyName) :

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

Proprietà numeriche Incrementa / Decrementa

Le proprietà numeriche CSS possono essere incrementate e decrementate con la sintassi += e -= , rispettivamente, usando il metodo .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 and Setters

Getter CSS

La funzione getter .css() può essere applicata a ogni elemento DOM della pagina come segue:

// 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");

Questa riga restituirà la larghezza calcolata dell'elemento specificato, ogni proprietà CSS fornita nelle parentesi produrrà il valore della proprietà per questo elemento DOM $("selector") , se si richiede l'attributo CSS che non esiste diventerà undefined come risposta.

Puoi anche chiamare il getter CSS con una serie di attributi:

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

questo restituirà un oggetto di tutti gli attributi con i loro valori:

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

Setter CSS

Il metodo setter .css() può anche essere applicato a ogni elemento DOM sulla pagina.

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

Questa istruzione imposta la width di $("selector") a 500px e restituisce l'oggetto jQuery in modo da poter concatenare più metodi al selettore specificato.

Il setter .css() può anche essere utilizzato passando un oggetto di proprietà CSS e valori come:

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

Tutte le modifiche apportate al setter vengono aggiunte alla proprietà dello style dell'elemento DOM style influenzando così gli stili degli elementi (a meno che il valore della proprietà dello stile sia già definito come !important da qualche altra parte negli stili).

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

jQuery
Manipolazione CSS

Ricerca…