JQuery adăugând proprietăți CSS. JQuery adaugă proprietăți CSS JQuery modifică stilul elementului
Să ne uităm la adăugarea de proprietăți folosind câteva exemple. CSS la pagina site-ului folosind jQuery. Să ne uităm la avantajele și dezavantajele celor două modalități principale de a schimba stilurile pe o pagină.
Pentru a modifica setările de conținut ale paginii folosind biblioteca jQuery pentru JavaScript, puteți folosi două metode:
1. Modificarea proprietăților individuale
Să schimbăm elementele cu proprietăți clasa unuȘi .clasa-a doua când treceți cu mouse-ul peste un element cu o clasă .site-ul web.
$(".site"). mouseover(funcție()( $(".clasa-unu, .clasa-doi") . css („lățime”, „30%”); $(".clasa-unu, .clasa-doi") . css(„înălțime”, „240px”); } ) ; |
Schimbarea claselor
Această metodă este de preferat și mai convenabilă dacă trebuie să modificați multe proprietăți diferite folosind jQuery. Dacă toate aceste proprietăți sunt specificate în fisierul js, atunci puteți complica serios lizibilitatea și înțelegerea întregului cod. Este mai bine să scrieți toate stilurile într-un fișier CSS și să folosiți jQuery pentru a le schimba.
Când are loc un eveniment, vom schimba stilul .clasa-unu pe stiluri .clasa-unu .clasa-doi:
$(".site"). on ("mouseover mousemove", funcția () ( $(".clasa-unu"). removeClass(). addClass("clasa-unu clasa-doua"); } ) ; |
Dacă te uiți cu atenție la codul de mai sus, s-ar putea să te întrebi de ce eliminăm clasa clasa unu iar apoi îl întoarcem împreună cu celălalt.
Acest lucru este necesar pentru că în acest cod s-a decis .clasa-unu folosește-l ca „comandă rapidă”, astfel încât în viitor să poți procesa acest element fără a-ți aminti ce nouă clasă are.
A trecut mult timp de când nu am avut articole despre JQuery pe blogul meu. Nu, au existat articole care îl foloseau, desigur, dar a acționat acolo ca un instrument auxiliar și, între timp, secțiunea „Learning JQuery” era acoperită de praf. Între timp, a venit momentul să trecem la cea mai interesantă parte a antrenamentului - adăugând diverse efecte, tocmai de aceea mulți oameni încep să-l studieze. Și în articolul de astăzi veți învăța cum să schimbați proprietățile CSS din mers.
Înainte de a intra în efectele în sine, să ne întoarcem puțin și să aruncăm o privire la CSS. În articolele anterioare, am schimbat aspectul paginii adăugând sau eliminând diverse clase CSS, care, desigur, trebuie mai întâi create în fișierul CSS. Aceasta este, în general, calea corectă, deoarece ia în considerare rolul CSS în construirea paginii.
Cu toate acestea, există momente când trebuie să schimbați un stil CSS care nu este în foaia de stil sau care nu poate fi descris. Pentru astfel de cazuri, JQuery are metoda .css().
Pentru a obține valoarea unei proprietăți CSS, trebuie pur și simplu să trecem numele proprietății ca șir, ceva de genul acesta. css('backgroundColor') .
Proprietățile care constau din mai multe cuvinte pot fi scrise cu o cratimă, ca într-un fișier CSS (background-color), sau cu alte majuscule, așa cum sunt scrise în DOM (backgroundColor). Pentru a seta proprietățile CSS, metoda .css() folosește două metode. Prima metodă constă în doi parametri, numele proprietății CSS și valoarea acesteia, despărțiți prin virgule. A doua este o hartă formată din perechi proprietate-valoare.
Css("proprietate","valoare") .css((proprietate1: "valoare1", "proprietate-2": "valoare2"))
Vom folosi metoda. css() , la fel cum am folosit .addClass() - le combinăm cu un selector și legăm evenimentul. Să ne uităm la metoda .css() folosind un exemplu specific. Vom avea nevoie de următorul marcaj HTML:
Și niște CSS:
#textbox( chenar: 1px solid #000; fundal: #DFECFF; margine: 20px automat; text-align: left; padding: 10px; lățime: 400px; culoare: #0000a0; font-style: italic; clar: ambele; )
Ca urmare, vom avea o pagină ca aceasta:
Există două butoane pe pagină - pentru a mări și a micșora fontul. În principiu, aici putem folosi metoda .addClass() descrisă în articolul precedent, dar să complicăm puțin sarcina și să ne imaginăm că trebuie să reducem sau să creștem textul de fiecare dată când este apăsat butonul corespunzător. Acest lucru, desigur, poate fi implementat prin descrierea unei clase separate pentru fiecare clic, dar va fi mult mai ușor să obțineți dimensiunea actuală a textului și să o măriți (scădeți) cu o valoare dată.
Codul nostru începe în mod tradițional cu $(document).ready() și un handler de evenimente buton $("#crește").click() :
$(document).ready(function())( $("#creste").click(function())( )));
Apoi, dimensiunea fontului poate fi obținută cu ușurință prin $(“#textbox”).css("fontSize") . Cu toate acestea, valoarea returnată va conține atât numărul, cât și unitățile, așa că trebuie să stocăm fiecare parte în propria sa variabilă, după care putem incrementa numărul și reatașăm unitățile la acesta. De asemenea, intenționăm să folosim obiectul JQuery de mai multe ori, așa că ar fi o idee bună să-l stocăm și într-o variabilă.
$(document).ready(function() ( $("#creștere").click(function() (var $vorbire = $("div.vorbire"); var currentSize = $vorbire.css("dimensiune font") ; var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2);
Prima linie din interiorul funcției .click() stochează o variabilă cu blocul #textblock.
Rețineți că folosim simbolul $ în numele variabilei $speech. Deoarece $ este un caracter valid pentru variabilele JavaScript, îl putem folosi ca un memento că această variabilă stochează un obiect JQuery. Următoarea linie salvează dimensiunea fontului blocului #textblock într-o variabilă - de exemplu, 12px.
După aceea, folosim parseFloat() și slice() . Funcția parseFloat() este utilizată pentru a converti valorile șirurilor în valori numerice (zecimale). De exemplu, șirul 12 va fi convertit în numărul 12. Dacă șirul începe cu un caracter nenumeric, parseFloat() va returna NaN, ceea ce înseamnă: „Nu este o valoare numerică” ( Nu un număr).Al doilea argument al funcției parseFloat() asigură că numărul va fi convertit într-o valoare zecimală.
Metoda .sice() returnează un subșir care începe cu un anumit caracter din șir. Deoarece numele unităților pe care le folosim are două caractere (px), specificăm că subșirul trebuie să înceapă cu ultimele două caractere ale șirului principal.
Tot ce trebuie să facem este să înmulțim valoarea rezultată a variabilei num cu 1,4 și apoi să setăm dimensiunea fontului prin concatenarea celor două variabile num și unit:
$(document).ready(function())( $("#creștere").click(funcție())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize" ); var num = parseFloat(currentSize, 10 var unit = currentSize.slice(-2)("fontSize", num + unit);
Acum, după ce faceți clic pe butonul „Mărire”, textul din bloc crește, ca în captura de ecran prezentată:
Următorul clic pe același buton continuă să mărească textul din bloc.
Pentru ca butonul „Scădere” să funcționeze, vom împărți valoarea variabilei – num/=1,4. Și pentru a nu mări dimensiunea codului, putem combina doi handlere de evenimente .click() într-unul singur, prin clasa de buton. Apoi, după setarea variabilelor, putem înmulți sau împărți cu ușurință în funcție de ID-ul butonului care a fost apăsat. Iată cum ar trebui să arate codul:
$(document).ready(function())( $("input").click(function())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize") ; var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); if (this.id=="crease")( num*=1.4; ) else if(this.id=="decrease); ") ( num/=1.4; ) $speech.css("fontSize", num + unit ));
Mai sus a fost cel mai simplu exemplu de utilizare a metodei .css() în practică. Mai poate fi dat un exemplu de utilizare a acestei metode.
Separarea elementelor de meniu
Destul de des în design există o tehnică precum împărțirea elementelor de meniu cu o linie verticală, iar primul și ultimul element de meniu nu ar trebui să aibă o linie laterală.
Un astfel de meniu va necesita următorul marcaj HTML:
Ul( stil-listă: niciunul; ) ul li( stil-listă: niciunul; float: stânga; fundal: #DFECFF; afișare: bloc; umplutură: 10px; chenar-dreapta: 1px gri solid; ) ul li a( text- decor: niciuna; culoare: #000;
Iată cum va arăta meniul nostru:
Și pentru a elimina separatorul corect din ultimul element de meniu (al patrulea articol), puteți folosi acest cod:
$(document).ready(function())( $("#menu ul li:last").css("border-right", "none"); ));
Și, ca rezultat, obținem acest meniu:
După cum puteți vedea, utilizarea acestei metode este destul de simplă și convenabilă, dar încercați totuși să nu abuzați de ea și utilizați-o numai în cazurile în care nu este posibil să adăugați stilul dorit la fișierul CSS.
Salvați această pagină pentru a testa exemplele de mai jos.
Biblioteca jQuery oferă o serie de metode convenabile și specializate care fac mult mai ușor lucrul cu stiluri CSS. Una dintre cele mai utilizate metode de acest gen este metoda css()., a cărui descriere succintă este dată în tabelul de mai jos:
Când citiți valorile proprietăților folosind metoda css(), obțineți valoarea proprietății pe care o are primul dintre elementele conținute în obiectul jQuery. În același timp, atunci când setați o proprietate, modificarea pe care o faceți se aplică tuturor elementelor setului. Un exemplu de cea mai simplă utilizare a metodei css() este prezentat mai jos:
$(function() ( var sizeVal = $("eticheta").css("dimensiunea fontului"); console.log("Dimensiunea fontului: " + dimensiuneVal); $("eticheta").css("font- dimensiune", "1.5em"); ));
În acest script, selectăm toate elementele de etichetă, obținem valoarea proprietății font-size folosind metoda css() și o imprimăm pe consolă. Apoi selectăm din nou toate elementele de etichetă și atribuim o nouă valoare a aceleiași proprietăți tuturor elementelor.
În ciuda faptului că scriptul folosește numele real al proprietății (dimensiunea fontului), și nu notația sa sensibilă la majuscule, adică forma de intrare în care această proprietate este definită în obiectul HTMLElement (proprietatea fontSize), este de asemenea acceptată corect, deoarece jQuery acceptă ambele opțiuni.
Ca rezultat al rulării acestui script, următorul rezultat este afișat pe consolă:
Setarea unei proprietăți la șirul gol ("") este echivalent cu eliminarea acelei proprietăți din atributul de stil al elementului.
Setarea mai multor proprietăți CSS simultan
Există două moduri de a seta mai multe proprietăți CSS simultan. Prima este formarea unui lanț de apeluri la metoda css(), după cum se arată mai jos:
$(funcție() ( $(„etichetă”).css(„dimensiunea fontului”, „1.5em”).css(„culoare”, „albastru”); ));
Acest script setează proprietățile de dimensiune și culoare a fontului. Același efect poate fi obținut folosind un obiect de afișare, așa cum se arată în exemplul de mai jos:
$(function() ( var cssVals = ( "dimensiunea fontului": "1.5em", "culoare": "albastru" ); $("eticheta").css(cssVals); ));
Ambele scenarii duc la același rezultat, prezentat în figură:
Setarea valorilor relative
Metoda css() poate lua și valori relative ca argumente. Sunt valori numerice care sunt precedate de semnele += și -= și sunt adăugate sau scazute din valoarea curentă. Această tehnică poate fi utilizată numai pentru valori numerice. Un exemplu corespunzător este dat mai jos:
$(funcție() ( $("etichetă: impar").css("dimensiune font", "+=5") $("etichetă:par").css("dimensiune font", "-=5") ") ));
Valorile relative sunt exprimate în aceleași unități ca și valorile proprietăților. În acest caz, dimensiunea fontului este mărită cu 5 pixeli pentru elementele de etichetă impare și redusă cu aceeași sumă pentru cele pare. Rezultatul este prezentat în figură:
Setarea proprietăților folosind o funcție
Puteți seta valorile proprietăților în mod dinamic trecând o funcție la metoda css(). Un exemplu corespunzător este dat mai jos:
$(function() ( $("etichetă").css("border", function(index, currentValue) ( dacă ($(this).closest ("#row1").length > 0) ( return " roșu solid gros"; ) else if (indice % 2 == 1) ( returnează "albastru dublu gros"; ) )); ));
Argumentele transmise funcției sunt indexul elementului din set și valoarea curentă a proprietății. Variabila this se referă la obiectul HTMLElement corespunzător elementului, iar funcția returnează valoarea de setat.
Folosind metode specializate pentru a lucra cu proprietăți CSS
În plus față de metoda css(), jQuery definește o serie de metode specializate pentru obținerea sau setarea valorilor unor proprietăți specifice. O listă a acestor metode este dată în tabelul de mai jos:
| Metodă | Descriere |
|---|---|
| înălţime() | Returnează înălțimea (în pixeli) a primului element conținut într-un obiect jQuery |
| înălțime (valoare) | Setează înălțimea tuturor elementelor conținute într-un obiect jQuery |
| innerHeight() | Returnează înălțimea intrinsecă (adică înălțimea unui element, inclusiv umplutura, dar excluzând marginile și marginile) primului element conținut într-un obiect jQuery |
| innerWidth() | Returnează lățimea intrinsecă (adică lățimea elementului, inclusiv umplutura, dar excluzând marginile și marginile) primului element conținut într-un obiect jQuery |
| decalaj() | Returnează coordonatele primului dintre elementele conținute într-un obiect jQuery, relativ la începutul documentului |
| outerHeight(valoare_booleană) | Returnează înălțimea primului element conținut într-un obiect jQuery, inclusiv padding și chenar. Argumentul determină dacă dimensiunea câmpurilor trebuie luată în considerare în acest caz |
| outerWidth(valoare_booleană) | Obține lățimea primului element conținut într-un obiect jQuery, inclusiv padding și chenar. Argumentul determină dacă dimensiunea câmpurilor trebuie luată în considerare în acest caz |
| poziţie() | Returnează coordonatele primului element conținut într-un obiect jQuery în raport cu elementul părinte care are un tip de poziționare specificat |
| scrollLeft(), scrollTop() | Obține valoarea de umplere a derulării din stânga sau de sus pentru primul dintre elementele conținute într-un obiect jQuery |
| scrollLeft(valoare), scrollTop(valoare) | Setează valoarea de derulare din stânga sau de sus pentru toate elementele conținute într-un obiect jQuery |
| lăţime() | Obține lățimea primului element conținut într-un obiect jQuery |
| lățime (valoare) | Setează lățimea pentru toate elementele conținute într-un obiect jQuery |
| înălțime (funcție), lățime (funcție) | Setează înălțimea sau lățimea tuturor elementelor conținute într-un obiect jQuery folosind funcția |
Numele celor mai multe dintre aceste metode se explică de la sine, dar unele dintre ele necesită explicații suplimentare. Metode decalaj()Și poziţie() returnează un obiect cu proprietăți topȘi stânga, care indică poziția elementului. Un exemplu de utilizare a metodei position() este dat mai jos.
Returnează sau modifică valorile CSS ale elementelor de pagină selectate. Funcția are patru utilizări:
returnează valoarea css styleName la elementul selectat. Dacă sunt selectate mai multe elemente, valoarea va fi luată din primul.
valoare-css styleName i se va atribui valoarea valoare, pentru toate elementele selectate.
grup de valori css styleName1, styleName2, ... vor fi atribuite valori valoare1, valoare2,..., pentru toate elementele selectate.
valoare-css styleName i se va atribui valoarea returnată de funcția definită de utilizator. Funcția este apelată separat pentru fiecare dintre elementele selectate. Când sunt apelate, îi sunt trecuți următorii parametri: index— poziția elementului în set, valoare— valoarea curentă a valorii css styleName la element.
Exemple de utilizare:
cometariu: Este important de reținut că folosind metoda .css(styleName) veți obține doar valorile css ale primului element dintre toate cele selectate. Dacă aveți nevoie de valorile tuturor elementelor, atunci ar trebui să utilizați constructe precum .map() sau .each() .
In actiune
Să găsim pământul nostru natal printre lista de planete și să-l evidențiem în 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( lățime: 260px; ) .item( lățime: 250px; înălțime: 20px; float: stânga; margine: 1px; umplutură: 3px; culoare de fundal: # EEEEEE; list-style-type:none ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li; class="item"~gt~Mercur~lt~/li ~gt~ ~lt~li class="item"~gt~Venus~lt~/li ~gt~ ~lt~li class="item"~gt~ Pământ~lt~/li ~gt~ ~lt~li class="element"~gt~Marte~lt~/li ~gt~ ~lt~li class="element"~gt~Jupiter~lt~/li ~gt ~ ~lt~li class="item"~gt~Satrurn~lt~/li ~gt~ ~lt~li class="item"~gt~Uranus~lt~/li ~gt~ ~lt~li class=" item"~gt~Neptun~lt~/li ~gt~ ~lt~li class="item"~gt~Pluto~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("culoare-fond", function(i,val)( if($(this).text() == "Ground") return "#cceecc"; else return val ; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Biblioteca jQuery vă permite să manipulați proprietățile și atributele elementelor unui set împachetat prin modificarea valorilor originale. Puteți seta proprietăți noi și puteți obține și modifica valorile proprietăților originale. Prin eliminarea sau adăugarea de clase, puteți schimba dinamic stilul de afișare al elementelor.
Manipularea proprietăților și atributelor elementului
1. Adăugarea și eliminarea unei clase
1.1. Method.addClass()
Adaugă clasa specificată (sau mai multe clase) la fiecare element al setului împachetat. Pentru ca această metodă să funcționeze, trebuie mai întâi să creați un stil pentru clasa adăugată. Metoda nu elimină clasa veche, ci pur și simplu adaugă una nouă.
AddClass(numele clasei) numele clasei— unul sau mai multe nume de clasă, separate prin spații. .addClass(funcție) funcţie- returnează unul sau mai multe nume de clasă, separate prin spațiu, pentru a fi adăugate celor existente. Ia ca argument indexul unui element din multime si numele existent al clasei (claselor).
1.2. Method.removeClass()
Îndepărtează numele de clasă specificat(e) din toate elementele setului împachetat.
RemoveClass(numele clasei) numele clasei- parametru opțional, unul sau mai multe nume de clasă separate printr-un spațiu. Dacă numele clasei nu este specificat, metoda elimină toate clasele existente din elementele setului. Dacă este specificat un nume de clasă, șterge numai clasa specificată. .removeClass(funcție) funcţie- Returnează unul sau mai multe nume de clasă, separate prin spațiu, pentru a fi eliminate din cele existente. Ia ca argument indexul elementului din multime si numele vechi al clasei (claselor).
1.3. Method.toggleClass()
Adaugă sau elimină una sau mai multe clase din fiecare element din set. Fiecare element al setului împachetat este verificat separat. Metoda adaugă numele clasei specificate dacă nu este prezent în element și îl elimină din acele elemente în care este prezent. Folosit pentru a comuta reprezentarea vizuală a elementelor.
ToggleClass(numele clasei) numele clasei- unul sau mai multe nume de clasă, separate prin spații, care vor fi comutate pentru fiecare element al setului. .toggleClass(numele clasei, boolean) numele clasei- unul sau mai multe nume de clasă, separate prin spații, care vor fi comutate pentru fiecare element al setului. valoare booleană— instalează, adaugă sau elimină clasa specificată. True adaugă clasa, false o elimină. .toggleClass(boolean) valoare booleană— parametru opțional, stabilește dacă clasele fiecărui element al setului vor fi schimbate. .toggleClass(funcție, boolean) funcţie- returnează numele clasei care va fi comutată pentru fiecare element al setului. Primeste ca argumente indexul elementului din multime si valoarea veche a clasei. valoare booleană— parametru opțional, stabilește dacă clasele fiecărui element al setului vor fi schimbate.
1.4. Method.hasClass()
Verifică dacă cel puțin un element din setul de potrivire are numele de clasă specificat. Returnează true dacă cel puțin unul dintre elementele din set are un nume de clasă valid, false în caz contrar.
HasClass(numele clasei) numele clasei— un șir cu numele clasei de căutat.
2. Modificarea atributelor elementului
Metoda obține valoarea atributului primului element al setului sau setează una sau mai multe valori de atribut pentru elementele setului.
2.1. Method.attr()
.attr(nume atribut) Numele atributului- Returnează valoarea atributului primului element din setul înfășurat. Dacă atributul lipsește, returnează nedefinit. .attr(nume atribut, valoare) Numele atributului sens- un șir sau un număr care va fi adăugat ca valoare de atribut pentru toate elementele setului înfășurat. .attr(atribute) atribute- valorile care sunt copiate din proprietățile obiectului vor fi setate pentru toate elementele setului înfășurat. .attr(nume atribut, funcție) Numele atributului— specifică numele atributului pentru care va fi setată valoarea specificată. funcţie— ia drept argumente indicele elementului din multime si valoarea veche a atributului. Valoarea returnată va fi setată la valoarea atributului.2.2. Method.removeAttr()
Îndepărtează atributul specificat din fiecare element al setului împachetat.
RemoveAttr(numele atributului) Numele atributului— un șir care definește atributul de șters.
3. Modificarea proprietăților elementului
3.1. Method.css()
Returnează valoarea calculată a proprietății de stil pentru primul element din setul împachetat sau setează una sau mai multe proprietăți CSS pentru fiecare element din set.
Css(numele proprietății) numele proprietatii— un șir cu numele proprietății, returnează valoarea sa calculată pentru primul element al setului. .css(nume de proprietate) nume de proprietate— o matrice de proprietăți, returnează valorile lor calculate pentru primul element al setului. .css(numele proprietății, valoare) numele proprietatii sens este un șir sau un număr care va fi setat ca valoare a proprietății specificate pentru toate elementele setului înfășurat. .css(numele proprietății, funcție) numele proprietatii— un șir cu numele proprietății. funcţie— indicele elementului din mulțime și valoarea veche a proprietății sunt transmise ca argumente funcției. Valoarea returnată va fi setată la toate elementele setului. .css(obiect de proprietăți) obiect de proprietăți- adaugă proprietăți CSS ale căror nume sunt definite ca chei în obiectul transmis la valorile lor asociate pentru toate elementele din setul corespunzător.
4. Obținerea și modificarea dimensiunilor și coordonatele unui element
4.1. Method.width()
Returnează lățimea curentă pentru primul element dintr-un set sau setează lățimea pentru fiecare element dintr-un set. Unitatea de măsură implicită este px. Metoda poate fi folosită dacă valoarea obţinută va fi utilizată în calcule matematice. Dimensiunile sunt calculate fără a ține cont de indentări și grosimea cadrului, fără a specifica unitatea de măsură. Pe măsură ce redimensionați fereastra browserului, dimensiunile elementului se pot schimba.
Width() Metoda este apelată fără parametri. Returnează valoarea lățimii curente pentru primul element dintr-un set, fără a specifica o unitate. .width(valoare) sens- o valoare numerică întreagă sau o valoare șir a lățimii care va fi setată pentru fiecare element al mulțimii. .width(funcție) funcţie- ia ca argument indexul elementului si valoarea veche a proprietatii, valoarea returnata va fi setata la latimea pentru toate elementele.
4.2. Method.height()
Returnează valoarea curentă a înălțimii pentru primul element dintr-un set sau setează înălțimea fiecărui element dintr-un set.
Height() Metoda este apelată fără parametri. Returnează valoarea înălțimii curente pentru primul element dintr-un set. .inaltime(valoare) sens— o valoare numerică întreagă sau o valoare a înălțimii șirului care va fi setată pentru fiecare element al setului. .înălțime (funcție) funcţie- ia ca argument indexul elementului si valoarea veche a proprietatii, valoarea returnata va fi setata la inaltimea tuturor elementelor.
4.3. Method.innerWidth()
Returnează lățimea primului element din setul împachetat, inclusiv umplutura, sau o setează pentru fiecare element din setul împachetat.
InnerWidth() Metoda este apelată fără parametri. Returnează lățimea interioară curentă pentru primul element dintr-un set. .innerWidth(valoare) sens— o valoare numerică întreagă care va fi setată pentru fiecare element al mulțimii. .innerWidth(funcție) funcţie
4.4. Method.innerHeight()
Returnează înălțimea primului element din setul înfășurat, ținând cont de umplutură.
InnerHeight() Metoda este apelată fără parametri. Returnează valoarea actuală a înălțimii interioare pentru primul element dintr-un set. .innerHeight(valoare) sens— o valoare numerică întreagă care va fi setată pentru fiecare element al mulțimii. .innerHeight(funcție) funcţie- ia ca argument indexul elementului si valoarea veche a proprietatii, valoarea returnata va fi setata la latimea interna pentru toate elementele multimii.
4.5. Method.outerWidth()
Returnează lățimea primului element din setul înfășurat. Aceste dimensiuni includ grosimea cadrului și lățimea indentării.
OuterWidth (boolean) valoare booleană
4.6. Method.outerHeight()
Reveniți înălțimea primului element din setul înfășurat. Aceste dimensiuni includ grosimea cadrului și lățimea indentării.
Înălțime exterioară (boolean) valoare booleană— valoare opțională, dacă este setată la true , se ia în considerare valoarea marjei, în caz contrar nu.
4.7. Method.offset()
Obține coordonatele curente ale primului element sau setează coordonatele pentru fiecare element. Returnează un obiect JavaScript cu proprietăți din stânga și de sus care conțin coordonatele px ale primului element al setului înfășurat relativ la începutul documentului. Metoda se aplică numai elementelor vizibile.
Offset() Metoda este apelată fără parametri.
4.8. Method.position()
Returnează un obiect JavaScript cu proprietățile din stânga și de sus care conțin coordonatele px ale primului element al setului înfășurat în raport cu cel mai apropiat element părinte. Metoda se aplică numai elementelor vizibile.
Position() Metoda este apelată fără parametri.
