jquery ottiene il valore della proprietà CSS. jQuery aggiunge proprietà CSS

21.03.2022

OS+attivatori

Salva questa pagina per testare gli esempi seguenti.

La libreria jQuery fornisce una serie di pratici metodi personalizzati che rendono molto più semplice lavorare con gli stili CSS. Uno dei metodi più utilizzati di questo tipo è metodo css(), che è brevemente descritto nella tabella seguente:

Quando leggi i valori delle proprietà usando il metodo css(), ottieni il valore della proprietà che ha il primo degli elementi contenuti nell'oggetto jQuery. Tuttavia, quando si imposta una proprietà, la modifica apportata si applica a tutti gli elementi dell'insieme. Di seguito è riportato un esempio dell'uso più semplice del metodo css():

$(function() ( var sizeVal = $("label").css("font-size"); console.log("Font size: " + sizeVal); $("label").css("font- dimensione", "1,5 em"); ));

In questo script, selezioniamo tutti gli elementi dell'etichetta, otteniamo il valore della proprietà font-size usando il metodo css() e lo stampiamo sulla console. Quindi selezioniamo nuovamente tutti gli elementi dell'etichetta e assegniamo il nuovo valore della stessa proprietà a tutti gli elementi.

Anche se lo script utilizza il nome effettivo della proprietà (dimensione del carattere) anziché la notazione basata su maiuscole e minuscole, ad es. la notazione che questa proprietà è definita sull'oggetto HTMLElement (la proprietà fontSize), è corretta anche perché jQuery supporta entrambi.

Questo script restituisce il seguente output alla console:

Impostare una proprietà su una stringa vuota ("") equivale a rimuovere quella proprietà dall'attributo style dell'elemento.

Impostazione di più proprietà CSS contemporaneamente

Esistono due modi per impostare più proprietà CSS contemporaneamente. Il primo consiste nel concatenare le chiamate al metodo css(), come mostrato di seguito:

$(function() ( $("label").css("font-size", "1.5em").css("color", "blue"); ));

Questo script imposta i valori delle proprietà del colore e della dimensione del carattere. Lo stesso effetto può essere ottenuto utilizzando un oggetto di visualizzazione, come mostrato nell'esempio seguente:

$(function() ( var cssVals = ( "font-size": "1.5em", "color": "blue" ); $("label").css(cssVals); ));

Entrambe le versioni dello script portano allo stesso risultato, mostrato nella figura:

Impostazione dei valori relativi

Il metodo css() può anche assumere valori relativi come argomenti. Sono valori numerici preceduti dai segni += e -= e aggiunti o sottratti dal valore corrente. Questa tecnica può essere utilizzata solo in relazione a valori numerici. L'esempio pertinente è mostrato di seguito:

$(function() ( $("label:dispari").css("font-size", "+=5") $("label:even").css("font-size", "-=5 ") ));

I valori relativi sono espressi nelle stesse unità dei valori delle proprietà. In questo caso, la dimensione del carattere viene aumentata di 5 pixel per gli elementi dell'etichetta dispari e diminuita della stessa quantità per quelli pari. Il risultato è mostrato in figura:

Impostazione delle proprietà con una funzione

Puoi impostare i valori delle proprietà in modo dinamico passando una funzione al metodo css(). L'esempio pertinente è mostrato di seguito:

$(function() ( $("label").css("border", function(index, currentValue) ( if ($(this).closest("#row1").length > 0) ( return " rosso pieno spesso"; ) else if (indice % 2 == 1) ( return "doppio blu spesso"; ) )); ));

Gli argomenti passati alla funzione sono l'indice dell'elemento nell'insieme e il valore corrente della proprietà. La variabile this fa riferimento all'oggetto HTMLElement corrispondente all'elemento e la funzione restituisce il valore da impostare.

Utilizzo di metodi specializzati per lavorare con le proprietà CSS

Oltre al metodo css(), jQuery definisce una serie di metodi specializzati per ottenere o impostare valori di proprietà specifici. Un elenco di questi metodi è riportato nella tabella seguente:

Metodi per lavorare con specifiche proprietà CSS

Metodo	Descrizione
altezza()	Restituisce l'altezza (in pixel) del primo elemento contenuto nell'oggetto jQuery
altezza (valore)	Imposta l'altezza per tutti gli elementi contenuti nell'oggetto jQuery
altezza interna()	Restituisce l'altezza interna (cioè l'altezza dell'elemento, compreso il padding ma esclusi i bordi e i margini) del primo elemento contenuto nell'oggetto jQuery
larghezza interna()	Restituisce la larghezza interna (ovvero la larghezza dell'elemento, compreso il riempimento ma esclusi bordi e margini) del primo elemento contenuto nell'oggetto jQuery
compensare()	Restituisce le coordinate del primo degli elementi contenuti nell'oggetto jQuery, relative all'inizio del documento
altezza esterna (booleano)	Restituisce l'altezza del primo elemento contenuto nell'oggetto jQuery, inclusi padding e bordi. L'argomento determina se la dimensione dei margini deve essere presa in considerazione.
larghezza esterna(booleano)	Ottiene la larghezza del primo elemento contenuto nell'oggetto jQuery, inclusi spaziatura interna e bordi. L'argomento determina se la dimensione dei margini deve essere presa in considerazione.
posizione()	Restituisce le coordinate del primo elemento contenuto nell'oggetto jQuery, relative al suo elemento padre, che ha un tipo position
scrollLeft(), scrollTop()	Ottiene il valore di riempimento dello scorrimento sinistro o superiore per il primo elemento contenuto nell'oggetto jQuery
scrollLeft(valore), scrollTop(valore)	Imposta il riempimento di scorrimento a sinistra o in cima a tutti gli elementi contenuti nell'oggetto jQuery
larghezza()	Ottiene la larghezza del primo degli elementi contenuti nell'oggetto jQuery
larghezza (valore)	Imposta la larghezza per tutti gli elementi contenuti nell'oggetto jQuery
altezza (funzione), larghezza (funzione)	Imposta l'altezza o la larghezza di tutti gli elementi contenuti in un oggetto jQuery utilizzando la funzione

I nomi della maggior parte di questi metodi sono autoesplicativi, ma alcuni di essi necessitano di ulteriori spiegazioni. Metodi compensare() e posizione() restituire un oggetto con proprietà superiore e sinistra, che indicano la posizione dell'elemento. Di seguito viene mostrato un esempio di utilizzo del metodo position().

Su diversi esempi, considera l'aggiunta di proprietà css alla pagina del sito utilizzando jQuery. Analizziamo i pro ei contro dei due modi principali per cambiare gli stili su una pagina.

Per modificare le impostazioni del contenuto della pagina, usa la libreria jQuery per JavaScript, puoi usarlo in due modi:

1. Modifica delle singole proprietà

Modifica gli elementi con le proprietà classe uno e .classe-due quando si passa il mouse sopra un elemento con una classe .sito web.

$(".sito web") . passaggio del mouse(funzione()(

$(".classe-uno, .classe-due" ) . css("larghezza" , "30%" );

$(".classe-uno, .classe-due" ) . css("altezza" , "240px" );

} ) ;

Cambio di classe

Questo metodo è preferibile e più conveniente se devi modificare molte proprietà diverse usando jQuery. Se tutte queste proprietà sono scritte nel file file js, puoi complicare seriamente la leggibilità e la comprensione dell'intero codice. È meglio scrivere tutti gli stili nel file CSS e utilizzare jQuery per cambiarli.

Quando si verifica un evento, cambia lo stile .classe-uno sugli stili .classe-uno .classe-due:

$(".sito web") . on("mouseover mousemove" , function()(

$(".classe-uno" ) . removeClass(). addClass("classe-uno-classe-due" );

} ) ;

Se osservi attentamente il codice sopra, potresti chiederti perché rimuoviamo la classe classe uno e poi lo restituiamo insieme ad un altro.

Quindi è necessario, perché in questo codice è stato deciso .classe-uno usalo come "scorciatoia" in modo che in futuro tu possa elaborare questo elemento senza ricordare quale nuova classe ha.

Restituisce o modifica i valori CSS degli elementi della pagina selezionati. La funzione ha quattro casi d'uso:

restituisce il valore CSS styleName sull'elemento selezionato. Se vengono selezionati più elementi, il valore sarà preso dal primo.

css-value styleName il valore verrà assegnato valore, per tutti gli elementi selezionati.

gruppo di valori CSS NomeStile1, NomeStile2, ... i valori verranno assegnati valore1, valore2, ..., per tutti gli elementi selezionati.

css-value styleName verrà assegnato il valore restituito dalla funzione personalizzata. La funzione viene chiamata separatamente per ciascuno degli elementi selezionati. Quando viene chiamato, vengono passati i seguenti parametri: indiceè la posizione dell'elemento nell'insieme, valore- valore CSS corrente styleName all'elemento.

Esempi di utilizzo:

Commento: È importante notare che l'utilizzo del metodo .css(styleName) otterrà solo i valori CSS del primo elemento di tutte le selezioni. Se hai bisogno dei valori di tutti gli elementi, dovresti usare costrutti come .map() o .each() .

In azione

trova la nostra terra natale nell'elenco dei pianeti ed evidenziala in verde:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ #list( width:260px; ) .item( width: 250px; height: 20px; float: left; margin: 1px; padding: 3px; background-color: # EEEEEE; list-style-type:none; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item"~gt~Mercury~lt~/li ~gt~ ~lt~li class="item"~gt~Venus~lt~/li ~gt~ ~lt~li class="item"~gt~ Terra~lt~/li ~gt~ ~lt~li class="item"~gt~Marte~lt~/li ~gt~ ~lt~li class="item"~gt~Giove~lt~/li ~gt ~ ~lt~li class="item"~gt~Saturnus~lt~/li ~gt~ ~lt~li class="item"~gt~Urano~lt~/li ~gt~ ~lt~li class=" item"~gt~Nettuno~lt~/li ~gt~ ~lt~li class="item"~gt~Plutone~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("background-color", function(i,val)( if($(this).text() == "Earth") return "#cceecc"; else return val ; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Buongiorno a tutti. Oggi, come ho promesso nella lezione, considereremo i metodi utilizzati per controllare css stili con jQuery.

Lascia che ti ricordi che con l'aiuto degli stili, non solo possiamo determinare l'aspetto di un elemento su una pagina web, ma anche controllarne la posizione, mostrarlo e nasconderlo a piacimento, ridimensionarlo e molto altro. In senso figurato, colui che ha accesso alla gestione dello stile css, che controlla la pagina web stessa! MA jQuery offre questa opportunità ai suoi utenti!

IN jQuery Esistono tre categorie di metodi: alcuni manipolano gli elementi selezionati, altri restituiscono i valori dell'elemento e altri ancora modificano gli elementi stessi.

Per aggiungere uno stile a qualsiasi elemento, devi utilizzare il metodo seguente: .css(nome, valore)

Cambiamo lo stile del titolo dell'articolo prima di allontanarci troppo dalla parte superiore della pagina. Facciamolo, ad esempio, rosso:

$("#titolo".css("colore", "#cc0000");

In questo esempio, ho selezionato l'elemento con id id="titolo", che è responsabile della visualizzazione del titolo del sito e ha aggiunto lo stile i.e. colore. E i pulsanti sono responsabili dell'applicazione o della restituzione dello stile predefinito.
Nomi e valori applicabili nel CSS: sfondo, bordo, stile carattere, colore eccetera.

Se vuoi impostare più css regole, è meglio usare la seguente costruzione:

.css((proprietà))

$("#text").css(("color" : "blue", "fontStyle" : "italic", "font-weight" : 900 ));

Questa istruzione renderà blu il colore del testo del paragrafo precedente e lo spessore del carattere verrà impostato su 900.

Si noti che per le proprietà composte css piace peso del carattere e colore di sfondo i loro equivalenti da JavaScript: fontWeight, backgroundColor eccetera.

Per dimostrare altri metodi di lavoro con gli stili, userò l'aiuto di quadrati multicolori, che mi sono già serviti più volte in tutorial come .

Lascia che ti ricordi il codice e gli stili per crearli:

Codice HTML:

Stili CSS:

DivRel (position:relative; width:600px; height:275px; border:dotted 1;) .big (position:absolute; width:200px; height:200px; left:200px; top:50px; background-color:red; border :solid 1px white; color:white; text-align:right; z-index:1;) .red (position:absolute; width:100px; height:100px; left:200px; top:50px; background-color:red ;bordo:solido 1px bianco;colore:bianco; allineamento testo:destra; indice z:1;) .verde (posizione:assoluta; larghezza:100px; altezza:100px; sinistra:250px; alto:75px; colore di sfondo :verde; bordo:solido 1px bianco; colore:bianco; text-align:right; z-index:2;) .blue (posizione:assoluta; larghezza:100px; altezza:100px; sinistra:300px; alto:100px; sfondo -colore:blu; bordo:solido 1px bianco;colore:bianco; allineamento testo:destra; indice z:3; cursore:puntatore;)

Prendi in considerazione l'eliminazione e l'assegnazione a qualche elemento css-classe:
.removeClass(classe)
.addClass(classe)

$("#style2").click(function()( $("#divRel1 > div:first").removeClass(); )); $("#rstyle2").click(function()( $("#divRel1 > div:first").addClass("big"); ));

Questa istruzione di clic del pulsante: "Elimina classe", rimuoverà la classe dal primo figlio contenuto nell'identificatore id="divRel1" e aggiungi una classe ad esso classe = "grande" dopo aver premuto il pulsante: "Aggiungi classe".

Il metodo seguente aggiunge la classe specificata all'elemento se non esiste o rimuove la classe se l'elemento ne ha già una:
.toggleClass(classe)

Prova a cliccare con il mouse all'interno della cornice che inquadra i quadrati colorati. Il colore di sfondo cambierà alternativamente.

$("#divRel1").click(function() ( $(this).toggleClass("yellow"); ));

E puoi ottenere (prima riga) e impostare (seconda riga) rispettivamente la larghezza e l'altezza dell'elemento elemento, usando i metodi:
.larghezza()
.larghezza(valore)
.altezza()
.altezza(valore)

$("#divRel1 > div:last").toggle(function()( $ (this).width(200).height(170); ),function()( $ (this).width(100).height (cento); ));

Il codice sopra seleziona l'ultimo :Ultimo elemento identificativo id="divRel1" e con l'interruttore alternare cambia o ripristina il valore predefinito quando si fa clic sul quadrato blu. Viene definita una proprietà per il suggerimento negli stili: cursore: puntatore.

Questa è una caratteristica molto interessante e importante dei metodi jQuery: sono usati come per compiti parametri e per ricevere valori di questi parametri.

Ma non è tutto! jQuery consente, se necessario, di rimuovere css-file associato a HTML-page e associarne una nuova:
$("link").attr("href", "Alternative.css");

Prova a cambiare, a tua discrezione, stili o codice jQuery. Curioso cosa puoi fare?

Data di: 2011-06-28

Piace

Commenti al post:

Ottimo articolo. Tutto chiaro. Grazie.

Ecco perché assumiamo dipendenti da remoto che faranno il lavoro, cioè mettono Mi piace e vengono pagati per questo.

Devi solo registrarti al nostro servizio. > www.oplata-vklike.tk<

Ti offriamo lavoro senza investimenti, sul sistema di accettazione ed elaborazione automatica degli ordini.

Noi forniamo:

Il nostro software con licenza.
- documenti con tutti gli ulteriori necessari. informazione.
- supporto tecnico costante.

Pagamento da 5500 al giorno. Pagamenti giornalieri.

Maggiori informazioni sul nostro sito web >> obrabotka.zarplatt.ru<<

Il nostro servizio fornisce Mi piace reali alle foto dei clienti che sono disposti a pagare per la qualità.

Per diventare il nostro dipendente remoto e iniziare a piacerci, guadagnando 45 rubli per 1 mi piace,

Devi solo registrarti al nostro servizio. > http://oplata-vklike.tk/<

Prelievo dei fondi guadagnati ogni giorno in pochi minuti.

Lavoro stabile con formazione, stipendio alto!

Lavori da casa! Completamente onesto e trasparente;
Disponibile per tutti, non importa chi sei e che esperienza hai su Internet!
Guadagnerai: oltre quattromila rubli al giorno!
Difficoltà: Facile!
Pagamento: - già sul prossimo denaro nel tuo conto!

Consulta i termini e le condizioni sul nostro sito web. > realno-money.tk< Скопируйте и вставьте в адресную строку Вашего браузера.

Il nostro servizio fornisce Mi piace reali alle foto dei clienti che sono disposti a pagare per la qualità.

Ecco perché assumiamo dipendenti da remoto che faranno il lavoro, cioè mettono Mi piace e guadagnano soldi per questo.

Per diventare il nostro dipendente remoto e iniziare a piacerci, guadagnando 45 rubli per 1 mi piace,

Devi solo registrarti al nostro servizio. > oplata-vklike.tk<

Prelievo dei fondi guadagnati ogni giorno in pochi minuti.

lavorare via Internet, con pagamenti giornalieri fino a 11.000 rubli.

Registrati sul nostro sito. > www.airline-work.tk<

Propongo. Lavoro affascinante su Internet. Senza esperienza. Reddito fiducioso da 5000 rubli. al giorno. Questo sistema è comprensibile a tutti.
Non devi lavorare tutto il giorno! Basta dedicare un paio d'ore al giorno al lavoro.
Smettila di pensare che non puoi fare soldi sul World Wide Web, puoi fare soldi su Internet!
In modo facile e comprensibile per tutti. Soprattutto, sii onesto!
La modalità di funzionamento è impostata da soli.
Informazioni più dettagliate sul nostro sito web. > http://oplata-vklike.tk< скопируйте и вставьте в адресную строку вашего браузера.

Ecco perché assumiamo dipendenti da remoto che faranno il lavoro, cioè mettono Mi piace e guadagnano soldi per questo.

Per diventare il nostro dipendente remoto e iniziare a piacerci, guadagnando 45 rubli per 1 mi piace,

Devi solo registrarti al nostro servizio. > http://oplata-vklike.tk/<

Prelievo dei fondi guadagnati ogni giorno in pochi minuti.

Un servizio unico di assistenza nell'ottenimento di un prestito da un investitore privato, oltre che da organizzazioni di credito. Adatto sia per aziende che per privati.

Prestito da un investitore privato.

La nostra azienda aiuta a incontrare l'investitore e il mutuatario.

Contatto diretto con l'investitore
Qualsiasi storia di credito
È necessario solo un passaporto
Lavoriamo con privati e aziende
Qualsiasi regione
Importo da 5.000 a 50.000.000 di rubli
Percentuale di approvazione 97%

vantaggi:

Senza garanzie e garanzie!
- Tariffa - a partire da solo 1% al mese!
- Nessun costo o commissione nascosta!

Invia una domanda sul nostro sito web. > www.ch-investor.tk<

Il nostro servizio fornisce Mi piace reali alle foto di clienti disposti a pagare per la qualità.

Ecco perché assumiamo dipendenti da remoto che faranno il lavoro, cioè mettono Mi piace e guadagnano soldi per questo.

Per diventare il nostro dipendente remoto e iniziare a piacerci, guadagnando 45 rubli per 1 mi piace,

Devi solo registrarti al nostro servizio. > http://oplata-vklike.tk/<

Prelievo dei fondi guadagnati ogni giorno in pochi minuti.

L'azienda leader in Russia e nei paesi della CSI per la vendita di biglietti aerei «Airline»

La più grande compagnia internazionale di vendita di biglietti A/B
recluta urgentemente dipendenti su base permanente per un semplice
lavorare via Internet, con pagamenti giornalieri da 11.000 rubli.

Lavorando nella nostra azienda ottieni:

Conformità al codice del lavoro
- Pacchetto sociale completo, ferie pagate, congedo per malattia, sanatorio.
- A ciascuno dei nostri dipendenti a casa è garantito un reddito elevato. strofinare. in un giorno.
- Pagamenti stabili garantiti del denaro guadagnato.
- I pagamenti vengono effettuati giornalmente su carte bancarie o portafogli elettronici.

Registrati sul nostro sito. > http://airline-work.tk/<

Senza investimenti non servono esperienza e professionalità!

jQuery ha tre categorie di metodi: alcuni manipolano elementi che corrispondono a un pattern; il secondo restituisce i valori dell'elemento e il terzo cambia gli elementi stessi.

Oggi esamineremo i metodi utilizzati per gli stili CSS.

Quindi, per aggiungere uno stile a qualsiasi elemento, devi utilizzare il seguente metodo:

.css(nome, valore)

Esempio:

$("div").css("bordo", "1px blu fisso");

Questa istruzione circonderà il div con un bordo blu.

I parametri qui utilizzati sono i nomi e i valori applicabili in : , font-style , color , ecc.

Se devi impostare diverse regole CSS per un elemento, allora è meglio usare la seguente costruzione:

.css((proprietà))

Esempio:

$("div").css(( border:"1px solid blue", fontWeight:"bolder", backgroundColor:"red" ));

Questa istruzione delineerà il div con un bordo blu, renderà lo sfondo rosso e il testo in grassetto.

Nota che le proprietà CSS complesse come font-weight e background-color usano i loro equivalenti JS: fontWeight , backgroundColor , ecc.

Elenchiamo altri metodi per lavorare con gli stili:

.addClass(classe)
Esempio:
$("p:last").addClass("main");
Questa istruzione aggiungerà la classe main all'ultimo elemento del paragrafo.
.removeClass(classe)
Esempio:
$("p:even").removeClass("main");
Questa istruzione rimuoverà la classe principale da tutti i paragrafi pari.
.toggleClass(classe)
Esempio:
$("p").toggleClass("principale");
Questa istruzione rimuoverà la classe principale da tutti i paragrafi, se presenti. E aggiungi questa classe se manca.
.compensare()
Esempio:
var offDiv=$("div").offset();
Questa istruzione ti consente di ottenere un elemento. Per ottenere i valori di una particolare proprietà, è necessario utilizzare le seguenti proprietà: offset.left per il riempimento sinistro e offset.top per il riempimento superiore.
.altezza(valore)
Esempio:
$("div").altezza(); $("div").altezza(200);
Questa istruzione consente di ottenere (prima riga) e impostare (seconda riga) l'altezza di un elemento.
.larghezza(valore)
Esempio:
$("div").larghezza(); $("div").larghezza(200);
Questa istruzione consente di ottenere (prima riga) e impostare (seconda riga) la larghezza di un elemento.
Un altro esempio:
varwidDiv=$("div").larghezza(); $("div.abete").larghezza(300);
La prima riga imposterà la variabile widDiv sulla larghezza del primo div. La seconda istruzione darà ai div della classe fir una larghezza di 300 pixel.
Questa è una caratteristica molto interessante dei metodi jQuery: vengono utilizzati sia per impostare parametri (quando vengono presi 2 argomenti) sia per ottenere i valori di questi parametri (quando viene passato un singolo argomento).

Proviamo, utilizzando le conoscenze acquisite, a creare un menu con le schede, come questo (fare clic sulle schede):

jquery-css

Scheda 1

Scheda 2

Scheda 3

Scheda 4

Quindi, il codice html della pagina è il seguente:

jquery-css

Scheda 1

Scheda 2

Scheda 3

Scheda 4

Come puoi vedere, tutte le schede hanno lo stesso stile definito dalla classe vkl e la scheda selezionata ha la classe selezionata. Scriveremo l'aspetto sulla pagina style.css

Vkl( float:left; width:140px; height:28px; background:#E5BA83; color:white; font-size:20px; border-right:1px solid white; padding-left:10px; ) #content( width:603px ;altezza:100px;sfondo:#CCA675; ) .selected( sfondo:#CCA675; )

La cosa più interessante rimane, ovvero la funzione chang():

funzione chang(s)( $(.selected").removeClass("selected"); $(s).addClass("selected"); )

Quindi come funziona questa funzione? Innanzitutto, viene cercato un elemento che ha la classe selezionata e questa classe viene rimossa da esso. Quindi (seconda riga) l'elemento selezionato (si trova dall'id passato alla funzione come parametro s) viene aggiunto alla classe selezionata. È così semplice.

Nel prossimo tutorial impareremo come usare jQuery per inserire interi blocchi di codice html in una pagina e manipolarli.