U ovom članku ćemo pogledati različite metode za rad sa klasama i stilovima elemenata. Hajde da se upoznamo sa svojstvima classList i stila, kao i primerima njihove upotrebe za upravljanje klasama i stilovima elemenata na stranici.
Upravljanje klasom(ama) elemenataPrvi način interakcije s klasama elemenata je korištenje DOM svojstva className. Ovo svojstvo je odraz atributa HTML klase u DOM-u. DOM svojstvo className nije imenovano class zbog činjenice da se ranije u JavaScript-u rezervisane riječi nisu mogle koristiti za imenovanje svojstava objekata. Ako ne znate šta su DOM svojstva i kako se razlikuju od HTML atributa, možete saznati više u ovom članku.
Primjer u kojem ćemo izvoditi različite operacije na klasi elementa koristeći DOM svojstvo className:
var elem = document.querySelector("#alert"); // dodaj klasu elementu elem.className = "alert"; // "alert" // mijenja klasu elementa elem.className = "alert-warning"; // "alert-warning" // dobijemo vrijednost klase i pohranimo je u className var classElem = elem.className; // "alert-warning" // uklonite klasu iz elementa elem.className = ""; // ""
Drugi način za izvođenje operacija povezanih s klasom elementa je korištenje metoda za manipulaciju atributima.
Primjer u kojem ćemo izvesti iste radnje kao i gornji kod, ali koristeći metode za upravljanje atributima:
var elem = document.querySelector("#alert"); // dodaj klasu elementu elem.setAttribute("class", "alert"); // mijenjamo klasu elementa elem.setAttribute("class", "alert-warning"); // dobijemo vrijednost klase i pohranimo je u className var classElem = elem.getAttribute("class"); // "alert-warning" // uklonite klasu iz elementa elem.removeAttribute("class");
DOM svojstvo className i HTML atribut klase uvijek su sinkronizirani, što znači da kada se jedno promijeni, promijeni se i drugo.
Ali element može imati više od jedne klase, ali nekoliko. U ovom slučaju, rad s njima kao nizom nije baš zgodan.
Na primjer, određivanje prisutnosti bilo koje određene klase u elementu korištenjem gornjih metoda više ne može biti tako lako. Ovo će zahtijevati pisanje dodatnog koda.
Primjer u kojem provjeravamo da li element ima klasu content__show:
... var elem = document.querySelector("#content"); if ((" " + elem.className + " ").indexOf(" content__show ") > -1) ( // element ima klasu content__show) else ( // element nema klasu content__show)
Ali osim ove situacije, postoje i druge. Na primjer, kada trebate dodati jednu specifičnu klasu elementu ili je ukloniti. Za obavljanje ovih i drugih radnji vrlo jednostavno, element ima DOM svojstvo classList posebno za ove slučajeve.
classList svojstvoSvojstvo classList je poseban objekat (DOMTokenList) koji sadrži metode za izvođenje različitih operacija nad klasama elementa.
classList metode:
- .add(className1[,className2,...]) - dodaje jednu ili više specificiranih klasa elementu. Ako element već ima ovu klasu, neće mu biti dodan.
- .remove(className1[,className2,... ]) - uklanja jednu ili više specificiranih klasa iz elementa. Ako element nema klasu koju želite ukloniti, neće biti poduzete nikakve radnje.
- .contains(className) – provjerava da li element ima klasu; vraća true ili false kao odgovor.
- .toggle(className [,flag]) - prebacuje naznačeno ime klase elementa, tj. ako element ima ovu klasu, onda je uklanja; inače dodaje. Drugi parametar (zastava) je opcioni. Podrazumevano je nedefinisano. Ako ga postavite na true ili false, radit će kao add ili remove metoda, tj. ili dodajte klasu elementu ili je uklonite iz njega.
Primjer koji pokazuje kako možete izvesti različite radnje vezane za klase elemenata koristeći metode classList:
// dobijemo element sa id = "sidebar" var sideBar = document.querySelector("#sidebar"); // prebaciti klasu hidden-xs elementa, tj. ako ga element ima, onda ga uklonite; i ako ova klasa ne postoji, dodajte joj je sideBar.classList.toogle("hidden-xs"); // dodaj tri dodatne klase u sideBar element.classList.add("col-xs-6","col-sm-4","col-md-3"); // uklanja klasu hidden-xs iz sideBar element.classList.remove("hidden-xs"); // provjeravamo da li element ima klasu hidden-lg i ako ima, dodaj mu još jedan hidden-md if (sideBar.classList.contains("hidden-lg") ( myID.classList.add("hidden-md" ; )
Objekat classList je pseudo-niz, tj. može se ponavljati kao niz.
Primjer u kojem ćemo ponavljati sve klase classList:
... var content = document.querySelector(".content"); // Opcija br. 1. Upotreba for petlje // classList.length - broj klasa za element // klase u classList se broje od 0 za (var i = 0, dužina = content.classList.length; i< length; i++) { // i - индекс класса в classList // выведем класс в консоль console.log(content.classList[i]); // или так (с помощью метода item) console.log(content.classList.item(i)); } // если мы хотим получить класс по его индексу, а указали в качестве значения индекса число, которое больше, чем (количества элементов - 1) в classList (т.к. отсчет ведётся с 0), то в этом случае получим в качестве результата undefined console.log(content.classList); // undefined // Вариант №2. С помощью цикла for..of for (let className of content.classList) { // выведем класс в консоль console.log(className); }
Svojstvo classList podržavaju svi moderni pretraživači. Ako vam je potrebna podrška za vrlo stare pretraživače (na primjer, Internet Explorer 8, 9), onda u ovom slučaju možete koristiti neku vrstu polifila.
Stilovi elemenataU DOM-u svaki element ima svojstvo stila pomoću kojeg možemo kontrolirati njegove stilove. Vrijednost ovog svojstva je objekt samo za čitanje. Postavljanje stilova za element u ovom slučaju se vrši dodavanjem odgovarajućih svojstava.
Primjer kako možete dodati stilove elementu putem svojstva DOM stila:
Square var square = document.querySelector(".square"); square.style.width = "170px"; square.style.height = "170px"; square.backgroundColor = "zeleno";
Imena svojstava objekta stila obično su ista kao i imena CSS svojstava. Jedini izuzetak su ona CSS svojstva koja koriste crticu. Na primjer, boja pozadine. U ovom slučaju, crtica i slovo iza nje zamjenjuju se velikim. Na primjer, CSS svojstvo boje pozadine za objekt stila bilo bi navedeno kao backgroundColor. I, na primjer, CSS svojstvo s prefiksom pretraživača -webkit-border-radius - kao što je WebkitBorderRadius.
Uklanjanje stilovaNa primjer, postavimo tijelo na neku boju pozadine:
Document.body.style.backgroundColor = "#eee";
Ako sada trebamo ukloniti ovaj stil, onda da bismo to učinili moramo mu jednostavno dodijeliti prazan niz:
Document.body.style.backgroundColor = "";
Primjeri korištenja svojstva DOM stila za postavljanje stilova za elemente.
// postavlja boju teksta na crvenu za element sa id = "introtext" koristeći stil document.querySelector("#introtext").style.color = "red"; // postavlja sve p elemente na stranici koristeći stil za postavljanje boje teksta na zelenu var paragrafi = document.querySelectorAll("p"); za (var i = 0, dužina = paragrafa.dužina; i< length; i++) { paragraphs[i].style.backgroundColor = "green"; } // выведем в консоль все CSS свойства элемента с идентификатором "introtext" var styleElem = document.querySelector("#introtext").style; for (var i = 0, length = styleElem.length; i < length; i++) { console.log(styleElem[i]); }
cssText svojstvoPored individualnog postavljanja stilova za element, možemo ih odmah postaviti pomoću posebnog svojstva style.cssText. Ovo se radi tako što se ovom svojstvu dodijeli niz koji se sastoji od skupa stilova odvojenih tačkom i zarezom. One. Ovo se radi na sličan način kao što postavljamo stilove u HTML atributu stila.
Primjer u kojem smo postavili stilove "font-size:40px; color:blue;" elementi sa intro klasom:
//dobijamo elemente sa intro klasom var intro = document.querySelectorAll("intro"); //postaviti "font-size:40px; color:blue;" svi elementi u kolekciji sadržani u intro for (var i = 0, dužina = intro.length; i< length; i++) { intro[i].style.cssText = "font-size:40px; color:blue;"; }
Morate biti oprezni kada postavljate stilove koristeći svojstvo style.cssText. To je zbog činjenice da kada se postavi, ovo svojstvo uklanja sve stilove koje element ima. One. one koje smo za njega postavili u atributu HTML stila iu njegovom odgovarajućem DOM svojstvu.
Možete izvesti operaciju sličnu onoj koju izvodi svojstvo style.cssText postavljanjem vrijednosti atributa HTML stila.
Na primjer:
//dobijamo prvi element sa uvodnom klasom var info = document.querySelector("info"); //postavite ga na stil "margin: 10px; padding: 10px; border: 1px solid green;" info.setAttribute("style", "margin: 10px; padding: 10px; granica: 1px čvrsto zeleno;");
Zadaci1. Napišite skriptu koristeći classList da dodijelite tri klase elementu s klasom teksta: veličina-40, boja-crvena i bg-žuta:
.size-40 (font-size: 40px; ) .color-red (boja: crvena; ) .bg-yellow (pozadina: žuta; )
Neki tekst...
2. Napišite kod za postavljanje stila "width: 180px; height: 180px;" svi elementi na stranici s klasom koja počinje riječima block-.
Interoperabilnost između JavaScript-a i CSS-a
Cascading Style Sheets (CSS) su standard za vizuelnu prezentaciju HTML dokumenata. Kaskadni listovi stilova dizajnirani su za upotrebu od strane dizajnera: omogućavaju vam da precizno definirate fontove, boje, margine, poravnanje, opcije ivica, pa čak i koordinate elemenata u dokumentu.
Ali oni su također interesantni programerima koji pišu u JavaScript-u na strani klijenta jer omogućavaju efekte animacije, kao što je, na primjer, blijedi sadržaj dokumenta s desne ivice ili lista koje se skuplja i širi, omogućavajući korisniku da kontrolira koliko sadržaja se prikazuje .
Upravljanje umetnutim stilovimaNajlakši način za kontrolu CSS stilova je manipuliranje stilskim atributom pojedinačnih elemenata dokumenta. Kao i većina HTML atributa, atribut style odgovara svojstvu istog imena na objektu Element i njime se može manipulirati u JavaScript skriptama. Međutim, svojstvo stila ima jednu karakterističnu osobinu: njegova vrijednost nije string, već CSSStyleDeclaration objekat. Svojstva ovog objekta predstavljaju CSS svojstva definirana u atributu HTML stila.
Na primjer, da biste prikazali sadržaj elementa teksta e velikim, podebljanim, plavim fontom, možete učiniti sljedeće da upišete željene vrijednosti u svojstva koja odgovaraju veličini fonta, težini fonta i stilu boje svojstva:
E.style.fontSize = "24px"; e.style.fontWeight = "podebljano"; e.style.color = "plavo";
Kada radite sa svojstvima stila CSSStyleDeclaration objekta, zapamtite da sve vrijednosti moraju biti navedene kao stringovi. U listu stilova ili atribut stila možete napisati:
Pozicija: apsolutna; font-family: sans-serif; boja pozadine: #ffffff;
Da biste učinili isto za element e u JavaScript-u, trebate sve vrijednosti staviti u navodnike:
E.style.position = "apsolutno"; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";
Imajte na umu da tačke sa zarezom nisu uključene u vrijednosti stringova. Ovo su tačke i zareze koje se koriste u JavaScript sintaksi. Tačke i zareze koje se koriste u CSS stilskim tablicama nisu potrebne u vrijednostima nizova postavljenim pomoću JavaScripta.
Također, zapamtite da sva svojstva pozicioniranja moraju uključivati jedinice mjere. To je:
E.style.left = 300; // Netačno: ovo je broj, a ne niz e.style.left = "300"; // Netačno: nedostaju jedinice e.style.left = "300px"; // Desno
Jedinice su potrebne kada se postavljaju svojstva stila u JavaScript-u - isto kao kada se postavljaju svojstva stila u stilskim listovima.
Mnoga svojstva CSS stilova, kao što je veličina fonta, sadrže crticu u svojim nazivima. JavaScript tumači crticu kao znak minus, tako da se sljedeći izraz ne može napisati:
E.style.font-size = "24px"; // Sintaksna greška!
Dakle, imena svojstava CSSStyleDeclaration objekta se malo razlikuju od imena stvarnih CSS svojstava. Ako ime CSS svojstva sadrži crtice, ime svojstva CSSStyleDeclaration objekta formira se uklanjanjem crtica i velikim slovom odmah iza svake. Drugim riječima, CSS svojstvu border-left-width se pristupa preko svojstva borderLeftWidth, a CSS svojstvu porodice fontova se može pristupiti preko svojstva fontFamily.
Dodatno, kada CSS svojstvo, kao što je float, ima ime koje odgovara JavaScript rezerviranoj riječi, ime ima prefiks "css" kako bi se kreiralo važeće ime svojstva CSSStyleDeclaration objekta. To jest, da biste pročitali ili promijenili vrijednost CSS float svojstva elementa, trebali biste koristiti svojstvo cssFloat CSSStyleDeclaration objekta.
Atribut stila HTML elementa je njegov inline stil i on nadjačava sva pravila stila u CSS listu. Umetnuti stilovi su općenito zgodni za korištenje za postavljanje vrijednosti stila, a to je pristup korišten u svim gornjim primjerima. Skripte mogu čitati svojstva CSSStyleDeclaration objekta koji predstavljaju inline stilove, ali vraćaju smislene vrijednosti samo ako su prethodno postavljene JavaScript skriptom ili ako HTML element ima inline atribut stila koji postavlja željena svojstva.
Na primjer, dokument može uključivati stilski list koji postavlja lijevu marginu za sve pasuse na 30 piksela, ali čitanje svojstva leftMargin jednog od ovih elemenata vratit će prazan red osim ako taj paragraf nema atribut stila koji nadjačava vrijednost postavljenu listu stilova.
Čitanje ugrađenog stila elementa je posebno izazovno kada se čitaju svojstva stila koja imaju svojstva jedinica i stenografskih zapisa: skripta mora uključivati sofisticiranu implementaciju raščlanjivanja CSS stilskih nizova kako bi se omogućilo izdvajanje i korištenje vrijednosti. Općenito, stil umetnutih elemenata je pogodan za korištenje samo za postavljanje stilova.
Ponekad je lakše pročitati ili napisati jedan red u inline stil elementa nego pristupiti objektu CSSStyleDeclaration. Da biste to učinili, možete koristiti metode getAttribute() i setAttribute() objekta Element ili svojstvo cssText objekta CSSStyleDeclaration:
// Obje izjave ispod postavljaju atribut stila // elementa e na string s: e.setAttribute("style", s); e.style.cssText = s; // Oba iskaza u nastavku dobivaju vrijednost atributa stila elementa e // kao string: s = e.getAttribute("style"); s = e.style.cssText;
Kreiranje efekata animacije pomoću CSS-aJedna od najčešćih upotreba CSS-a je u prikazivanju efekata vizuelne animacije. Možete ih implementirati pomoću metoda setTimeout() ili setInterval(), koristeći ih za organiziranje višestrukih poziva funkciji koja mijenja inline stil elementa.
// Čini element e relativno pozicioniranim i pomiče ga lijevo i desno. // Prvi argument može biti objekt elementa ili vrijednost id atributa // željenog elementa. Ako proslijedite funkciju kao drugi argument, ona će biti pozvana sa e // kao argumentom kada se animacija završi. Treći argument određuje // vrijednost pomaka elementa e. Zadano je 5 piksela. // Četvrti argument određuje koliko dugo efekat treba da se igra. // Po defaultu efekat traje 500ms. funkcija shake(e, oncomplete, distance, time) ( // Obraditi argumente if (typeof e === "string") e = document.getElementByld(e); if (!time) time = 500; if (!distance) distance = 5; var originalStyle = e.style.cssText // Sačuvaj originalni stil e.style.position = "relative"; Zapamtite početak animacije animate( // Pokreni animaciju // Ova funkcija provjerava proteklo vrijeme i mijenja koordinate e // Ako je vrijeme za završetak animacije, vraća početno stanje element e U suprotnom, mijenja koordinate funkcije e i zakazuje svoj sljedeći poziv animate() (var now = (new Date()).getTime(); // Dobiti trenutno vrijeme var elapsed = now-start; / Koliko je vremena prošlo od početka var fraction = proteklo / vrijeme?
I shake() i fadeOut() uzimaju opcionu funkciju povratnog poziva kao svoj drugi argument. Ako je ova funkcija specificirana, bit će pozvana kada se završi reprodukcija efekta animacije. Element na koji je primijenjen efekat animacije bit će proslijeđen funkciji povratnog poziva kao argument. Sljedeća HTML oznaka kreira dugme koje, kada se klikne, proizvodi efekat protresanja, a zatim efekat rastvaranja:
Kliknite me!
Obratite pažnju na to koliko su funkcije shake() i fadeOut() slične jedna drugoj. Oba mogu poslužiti kao predlošci za implementaciju sličnih efekata animacije koristeći CSS svojstva.
Computed StylesSvojstvo stila elementa specificira ugrađeni stil elementa. Ima prednost u odnosu na sve stilove i može se uspješno koristiti za postavljanje CSS svojstava za promjenu vizualnog izgleda elementa. Međutim, općenito nema smisla zvati ga kada želite znati stvarne stilove primijenjene na element. Ono što je potrebno u ovom slučaju naziva se računarski stil.
Izračunati stil elementa je skup vrijednosti svojstava koje je preglednik dobio (ili izračunao) iz inline stila i svih pravila iz svih stilskih listova koja se primjenjuju na element: to je skup svojstava koja se stvarno koriste prilikom prikazivanja element. Poput inline stilova, izračunati stilovi su predstavljeni CSSStyleDeclaration objektom. Međutim, za razliku od inline stilova, izračunati stilovi su samo za čitanje. Ovi stilovi se ne mogu mijenjati, ali izračunati objekt CSSStyleDeclaration vam omogućava da tačno znate vrijednosti svojstava stila koje je pretraživač koristio prilikom prikazivanja odgovarajućeg elementa.
Možete dobiti izračunati stil elementa koristeći getComputedStyle() metodu Window objekta. Prvi argument za ovu metodu je element čiji izračunati stil želite da vratite. Drugi argument je obavezan i obično prosljeđuje null ili prazan string, ali može proći i niz sa imenom CSS pseudo-elementa kao što je "::before", "::after", ":first-line" ili " :prvo slovo":
Var title = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(element, null);
Povratna vrijednost metode getComputedStyle() je CSSStyleDeclaration objekat koji predstavlja sve stilove primijenjene na navedeni element (ili pseudo-element). Postoje mnoge značajne razlike između CSSStyleDeclaration objekata koji predstavljaju inline stilove i izračunate stilove:
Svojstva izračunatog stila su samo za čitanje.
Izračunata svojstva stila imaju apsolutne vrijednosti: relativne mjerne jedinice, kao što su procenti i bodovi, pretvaraju se u apsolutne vrijednosti. Svako svojstvo koje specificira veličinu (kao što je širina margine ili veličina fonta) imat će vrijednost izraženu u pikselima. Odnosno, njegova vrijednost će biti string sa sufiksom "px", tako da ćete morati da ga raščlanite, ali nećete morati da brinete o definisanju i pretvaranju jedinica. Vrijednosti svojstava koje definiraju boju bit će vraćene u formatu "rgb(#,#,#)" ili "rgba(#,#,#,#)".
Svojstva koja su stenografska notacija se ne vrednuju – samo osnovna svojstva na kojima se zasnivaju. Na primjer, ne biste trebali pokušavati da dobijete vrijednost svojstva margine, već umjesto toga pristupite svojstvima marginLeft, marginTop, itd.
Svojstvo cssText izračunatog stila nije definirano.
Rad sa računarskim stilovima može biti prilično težak, a pristup im možda neće uvijek vratiti informacije koje očekujete. Razmotrite svojstvo porodice fontova kao primjer: ono prihvata listu imena porodica fontova odvojenu zarezima radi kompatibilnosti. Kada čitate svojstvo fontFamily izračunatog stila, čekate vrijednost najspecifičnijeg stila porodice fontova primijenjenog na element. I u ovom slučaju, vrijednost kao što je "arial, helvetica, sans-serif" može biti vraćena, što ne govori ništa o fontu stvarno korištenog fonta.
Upravljanje stilskim tablicamaDo sada smo vidjeli kako postaviti i dobiti vrijednosti svojstava CSS stila i pojedinačne klase elemenata. Međutim, postoji i mogućnost manipulacije samim CSS stilovima. Ovo obično nije potrebno, ali ponekad može biti korisno, a ovaj odjeljak će ukratko prikazati moguće tehnike.
Kada radite sa samim listovima stilova, naići ćete na dvije vrste objekata. Prvi tip su objekti Element, koji predstavljaju elemente i koji sadrže ili upućuju na stilove. Ovo su normalni elementi dokumenta i ako na njima definirate id atribut, možete ih odabrati pomoću metode document.getElementById().
Drugi tip objekata su CSSStyleSheet objekti, koji predstavljaju same listove stilova. Svojstvo document.styleSheets vraća objekt nalik nizu samo za čitanje koji sadrži CSSStyleSheet objekte koji predstavljaju stilove dokumenta. Ako definirate atribut title na elementu ili koji definira ili upućuje na stilski list, taj objekt će biti dostupan kao svojstvo CSSStyleSheet objekta s imenom navedenim u atributu title.
Sljedeći odjeljci opisuju koje se operacije mogu izvesti na ovim elementima i objektima stilova.
Uključivanje ili isključivanje stilovaNajjednostavnija tehnika za rad sa stilovima je ujedno i najprenosiviji i najpouzdaniji. Elementi i CSSStyleSheet objekti definiraju onemogućeno svojstvo koje se može čitati i pisati JavaScript skriptama. Kao što njegovo ime sugeriše, ako je svojstvo disabled postavljeno na true, stilski list je onemogućen i pretraživač će ga ignorisati.
Ovo je jasno prikazano funkcijom disableStylesheet() ispod. Ako mu date broj, on će ga interpretirati kao indeks u nizu document.styleSheets. Ako mu dostavite string, on će ga protumačiti kao CSS selektor, proslijediti ga metodi document.querySelectorAll() i postaviti onemogućeno svojstvo svih primljenih elemenata na true:
Funkcija disableStylesheet(ss) ( if (typeof ss === "broj") document.styleSheets.disabled = true; else ( var sheets = document.querySelectorAll(ss); for(var i = 0; i
Dobijanje, umetanje i uklanjanje pravila iz stilskih listovaPored pružanja mogućnosti za omogućavanje ili onemogućavanje stilskih listova, CSSStyleSheet objekt također definira API za preuzimanje, umetanje i uklanjanje stilskih pravila iz stilskih listova. IE8 i starije verzije implementiraju malo drugačiji API od standardnog koji implementiraju drugi pretraživači.
Općenito, direktna manipulacija stilskim listovima rijetko je korisna. Umjesto dodavanja novih pravila u stilske listove, obično je bolje ostaviti ih statičkim i raditi sa svojstvom className elementa. Međutim, ako želite korisniku dati potpunu kontrolu nad stilskim listovima vaše web stranice, možda ćete htjeti implementirati dinamičku manipulaciju stilskim listovima.
Objekti CSSStyleSheet pohranjeni su u nizu document.styleSheets. Objekt CSSStyle Sheet ima svojstvo cssRules koje pohranjuje niz stilskih pravila:
Var firstRule = document.styleSheets.cssRules;
U IE ovo svojstvo se zove pravila, a ne cssRules.
Elementi cssRules ili niza pravila su CSSRule objekti. U standardnom API-ju, CSSRule objekat može predstavljati bilo koju vrstu CSS pravila, uključujući @rules kao što su @import i @page direktive. Međutim, u IE, niz pravila može sadržavati samo stvarna pravila stilova.
CSSRule objekat ima dva svojstva koja se mogu koristiti na prenosivi način. (U standardnom API-ju pravila koja nisu u stilu nemaju ova svojstva, pa ćete ih možda morati preskočiti kada prelazite preko stilskog lista.) Svojstvo selectorText je CSS selektor za pravilo, a svojstvo stila je referenca na CSSStyleDeclaration objekt koji se može upisivati koji opisuje stilove pridružene ovom selektoru. Podsjećamo, CSSStyleDeclaration je isti tip koji se koristi za predstavljanje inline i izračunatih stilova.
Objekt CSSStyleDeclaration može se koristiti za čitanje postojećih ili kreiranje novih stilova u pravilima. Često, kada se prelazi kroz stilski list, interesantan je tekst samog pravila, a ne njegov raščlanjeni prikaz. U ovom slučaju, možete koristiti svojstvo cssText objekta CSSStyleDeclaration, koje sadrži pravila u tekstualnom prikazu.
Pored mogućnosti preuzimanja i mijenjanja postojećih pravila lista stilova, imate mogućnost dodavanja pravila i uklanjanja pravila iz lista stilova. Standardno sučelje aplikacije definira metode insertRule() i deleteRule() koje vam omogućavaju dodavanje i uklanjanje pravila:
Document.styleSheets.insertRule("H1 (težina teksta: bold; )", 0);
IE pretraživač ne podržava metode insertRule() i deleteRule(), ali definira funkcije addRule() i removeRule() koje su im gotovo ekvivalentne. Jedina velika razlika (osim imena funkcija) je u tome što addRule() očekuje da primi selektor i stil kao tekst u dva odvojena argumenta.
Kreiranje novih stilskih tablicaKonačno, možete kreirati potpuno nove stilove i dodati ih u svoj dokument. U većini pretraživača, ova operacija se izvodi pomoću standardnih tehnika implementiranih u DOM: novi element se kreira i ubacuje u dokument u sekciji, a zatim se sadržaj stilskog lista dodaje pomoću svojstva innerHTML. Međutim, u IE8 i starijim verzijama, novi CSSStyleSheet objekt mora biti kreiran korištenjem nestandardne metode document.createStyleSheet(), i dodajte tekst stilskog lista koristeći svojstvo cssText.
Primjer ispod pokazuje kreiranje novih tabela:
// Dodaje listu stilova u dokument i ispunjava ga navedenim stilovima. // Argument styles može biti string ili objekat. Ako je string, // se tumači kao tekst lista stilova. Ako je to objekt, onda svako njegovo // svojstvo mora definirati pravilo stila koje će se dodati tablici. // Imena svojstava su selektori, a njihove vrijednosti su odgovarajuća funkcija stilova addStylesheet(styles) ( // Prvo morate kreirati novi stilski list var styleElt, styleSheet; if (document.createStyleSheet) ( //Ako IE API je definiran, koristite ga styleSheet = document .createStyleSheet() else ( var head = document.getElementsByTagName("head"); styleElt = document.createElement("style"); // Novi element head.appendChild(styleElt); // Umetanje u // Sada je nova tabela na kraju niza styleSheet = document.styleSheets ) // Umetanje stilova u tabelu if (typeof styles === "string") ( // Argument sadrži tekst; tekstualna definicija lista stilova if (styleElt) styleElt.innerHTML = styles .cssText = styles // IE API ) else ( // Argumentni objekat sa pravilima za umetanje var i = 0; for(selektor u stilovima); if (styleSheet.insertRule) ( var pravilo = selektor + " (" + stilovi + ")"; styleSheet.insertRule(pravilo, i++); else ( styleSheet.addRule(selektor, stilovi, i++); ) ) ) )
Posljednje ažuriranje: 1.11.2015
Postoje uglavnom dva pristupa radu sa svojstvima stila elementa u JavaScript-u:
Promjena svojstva stila
Promjena vrijednosti atributa klase
Svojstvo stila predstavlja složeni kontrolni objekat stila i direktno se preslikava na atribut stila html elementa. Ovaj objekt sadrži skup CSS svojstava: svojstvo element.style.CSS. Na primjer, postavimo boju fonta:
Var root = document.documentElement; // postavljamo stil root.style.color = "blue"; // dobijemo vrijednost stila document.write(root.style.color); //plavo
U ovom slučaju, ime svojstva boje je isto kao i css svojstva. Slično, mogli bismo postaviti boju koristeći css:
Html( boja:plava; )
Međutim, brojna css svojstva imaju crticu u svojim imenima, na primjer, font-family . JavaScript ne koristi crticu za ova svojstva. Samo prvo slovo koje dolazi nakon crtice pretvara se u veliko slovo:
Var root = document.documentElement; root.style.fontFamily = "Verdana";
className svojstvoKoristeći svojstvo className, možete postaviti atribut klase html elementa. Na primjer:
.blueStyle( boja:plava; font-family:Verdana; ) .article(font-size:20px; ) Naslov članka
Prvi paragraf
Drugi paragraf
var articleDiv = document.querySelector("div.article"); // postavljanje nove klase articleDiv.className = "blueStyle"; // dobijemo ime klase document.write(articleDiv.className);Koristeći klase, ne morate konfigurirati svako pojedinačno svojstvo css koristeći svojstvo style.
Ali mora se uzeti u obzir da se prethodna vrijednost atributa klase briše. Stoga, ako trebamo dodati klasu, moramo kombinirati njeno ime sa starom klasom:
ArticleDiv.className = articleDiv.className + "blueStyle";
A ako trebate potpuno ukloniti sve klase, svojstvu možete dodijeliti prazan niz:
ArticleDiv.className = "";
classList svojstvoGore smo raspravljali o tome kako dodati klase elementu, ali za upravljanje više klasa mnogo je zgodnije koristiti svojstvo classList. Ovo svojstvo predstavlja objekat koji implementira sljedeće metode:
add(className) : dodaje klasu className
remove(className) : uklanja klasu className
toggle(className) : Prebacuje klasu elementa na ime klase. Ako nema klase, onda se dodaje, ako postoji, onda se uklanja
Na primjer:
Var articleDiv = document.querySelector("div.article"); // uklonite klasu articleDiv.classList.remove("article"); // dodaj klasu articleDiv.classList.add("blueStyle"); // prebacivanje klase articleDiv.classList.toggle("article");
Koristeći JavaScript, možete lako manipulisati svim karakteristikama čvorova na HTML stranici. Ali, po pravilu, menjanje karakteristika čvorova „ručno“ korišćenjem JavaScript-a je previše radno intenzivan posao i zahteva od programera poznavanje zamršenosti HTML-a i CSS-a.
Mogućnosti CSS-a omogućavaju da se većina ovog zadatka prenese na dizajnera rasporeda, a programer će morati samo da implementira manipulaciju stanjima ovih čvorova. Ovakav pristup rješavanju problema omogućava vam da zaobiđete većinu zamki i riješite mnoge probleme bez većih poteškoća.
Najjednostavniji primjer je skrivanje/prikazivanje bloka na stranici koristeći JavaScript. To se obično radi ovako:
Primjer teksta. Primjer teksta.
Da vidimo šta se desilo.
Ovdje sve funkcionira odlično i nema šta zamjeriti. Uzmimo još jedan primjer:
Mama je oprala okvir. Sin voli svog tatu.
Recimo da klikom na dugme „Prikaži celu istinu“ moramo sakriti čvor span#lie (oznaku span sa identifikatorom laž). A kada kliknete na dugme „Vrati kako je bilo“, ponovo pokažite ovaj čvor. Pokušajmo koristiti istu funkcionalnost za implementaciju ovog zadatka:
funkcija hide(nodeId) ( var node = document.getElementById(nodeId); if (čvor) ( node.style.display = "none"; ) ) funkcija show(nodeId) (var node = document.getElementById(nodeId); if (čvor) ( node.style.display = "blok"; ) )
Mama je oprala okvir. Sin voli svog tatu.
Provjerimo rezultat rada na djelu.
Kao što se može vidjeti iz primjera, tipka “Pokaži cijelu istinu” obavlja svoj zadatak po želji. Ali kada kliknete na dugme "Vrati se kako je bilo", tekst se ponovo pojavljuje, ali s nekim izobličenjima - pojavljuju se potpuno nepotrebni prijelomi redaka.
Šta je razlog? Oni koji znaju malo CSS odavno su shvatili kuda idem. Stvar je u tome da ako je svojstvo prikaza bilo kojeg čvora postavljeno na blok, onda čvor postaje blok element, koji po defaultu zauzima 100% širine. U našem slučaju, potrebno je postaviti vrijednost inline, a ne blok. I zašto programer mora znati takve suptilnosti? U ovom slučaju to uopće nije potrebno.
Možete ići na drugi način - na primjer, promijeniti kod funkcije sakrivanja dodavanjem memorije originalne vrijednosti u međuvarijablu. Ali postoji bolji način.
Okrenimo moć CSS-a u našu korist. Kreirajmo specijalnu skrivenu CSS klasu u kojoj ćemo postaviti svojstva koja su nam potrebna. Sada ostaje samo da dodelite ovu klasu željenom čvoru i ona će nestati sa ekrana. Uklanjanjem ove klase bez problema će se vratiti na dužnost.
.hidden (display: none;) function hide(nodeId) (var node = document.getElementById(nodeId); if (node) (node.className = "hidden"; ) ) funkcija show(nodeId) (var node = document. getElementById(nodeId) if (čvor) (node.className = ""; ) )
Mama je oprala okvir. Sin voli svog tatu.
Sada primjer radi kako treba.
Međutim, ostaje još jedan problem - slučaj u kojem čvor već ima neku klasu se ne uzima u obzir. Pokušajte sami riješiti ovaj problem.
U opštem slučaju, ovaj pristup se može okarakterisati na sledeći način: treba težiti da se manipuliše ne karakteristikama čvorova, već njihovim stanjima. Prisustvo jedne ili druge klase u čvoru je upravo to stanje. S obzirom na to da čvor može sadržavati nekoliko klasa, čak se i prilično složene manipulacije mogu svesti na jednostavnu shemu prebacivanja stanja. Zatim zamolite dizajnera izgleda da pripremi posebna pravila za ova stanja u stilu.
I šta kažu, ovi glasovi. Jedan i. Isto: Ja sam prodavac, ja sam prodavac. Šta ćeš uraditi. Šta možeš učiniti.
Da, Hydra luk u Rusiji 2016. A to znači da Bull Gates ne uspostavlja kontakt. Ne radi. Ili možda dolazi. Ali ti ne razumiješ. Možda je Minotaur onaj mrtvi pacov na plafonu. . Možda je tako. I nisu ti ništa objasnili. A to znači poseban postupak. Pa sam otišao u mrak. Jadne koze... Ma, nema veze, mi ćemo to shvatiti i kazniti krivce. Biće za njih upute za nigella sativa svijeće,
trinaestu platu u valuti... Podigao je. Stavio sam na sto svesku sa profilom Dantea Aligijerija na koricama i neko vreme se koncentrisao na papir olovkom, i odmah sam pretpostavio da unutra crta iste profile Dantea, samo male. Iz nekog razloga, ovi ljudi misle da tokom dugog dvadesetog veka, uputstva za sveće Nigella Sativa nisu proučavala njihove metode rada. Spuštam notes. Zakoračio je prema meni, kao da će svojim zakasnelim zagrljajem izliječiti sve moje emocionalne rane, ali onda je zazvonio telefon na njegovom stolu. Šmiga je opsovao i podigao slušalicu. Slušao je nekoliko sekundi, a onda mu je lice postalo tmurno i pažljivo. Da gospodine, . Rekao je i spustio slušalicu. Pogledavši u mene, krivo je podigao ruke. Vidi šta se dešava.
Wish. Onda samo naprijed, . rekao je Čapajev ustajući iza hotela ecstasy. Nakon što smo napustili štabni vagon, otišli smo do zadnjeg dela voza. Ono što se dešavalo mi se činilo sve čudnijim. Nekoliko vagona pored kojih smo prošli bilo je mračno i činilo se da je tako. Prazan. Nigdje nije bilo upaljenih svjetala; Iza vrata se nije čuo nijedan zvuk. Jedva sam mogao vjerovati da iza ploča od oraha, u čijoj se uglačanoj površini ogledala svjetlost Čapajevljeve cigare. Crveni vojnik spava, ali ja sam se trudio da ne razmišljam o tome.
Do 2003. japanski specijalisti. Bilo je moguće razviti skup od nekoliko mikrosondi koje su direktno povezivale mozak i omogućile, u određenoj mjeri, objektivizaciju slike ljudske percepcije. Japanska oprema nije mogla utvrditi šta je tačno osoba koja je posmatrana osjećala i mislila. Ali to je omogućilo da se dobije slika u boji (iako mutna) onoga što on vape hydra. I ne samo u stvarnosti, već iu brzoj fazi sna. To je postalo moguće jer signal nije uzet iz optičkog živca, već iz tih zona. Mozak koji je odgovoran za direktno predstavljanje. Opremu je odmah kupio tim Potašinskog. Signal sa seta sondi implantiranih u mozak mogao bi se prenositi bežično. Veze koje su omogućile bablonautu da vodi normalan život, ni na koji način nije ograničen učešćem u eksperimentu. Bilo je potrebno samo da se prijemnik signala nalazi negdje u blizini. Koja je zatim prenosila informacije na kompjuter u realnom vremenu. Ukratko, shema eksperimenata Potashinskog izgledala je ovako: Prvo je u mozak bablonauta-eksperimentatora implantiran set kontrolnih elektroda (dobrovoljci su, kao i obično, odabrani među mladim oficirima FSB-a za ovu ulogu).
Sa mrtve tačke. Slušaj, brate”, rekao je, “kakva je ovo priroda?” O cemu pricas? - upitala je Isa. Pa, rekli ste u autu da tijelo od šrapnela ima istu prirodu kao i dugino. A kakva je ovo priroda? Bolje ne pitaj o ovome. Brate,” Isa se namršti. Zašto. Još niste spremni za ovo. Kako nije spreman. I amfetamin i marihuana u isto vrijeme. Da sam spreman, ne bih pitao. Tako da možete odgovoriti. Or.
Uskoro. pitan. Kupi hašiš u Vladivostoku, rekao sam, ovde... Neko je izbirljiv. Ljubavnik bi se mogao uvrijediti što mu nije dozvoljeno dalje od mrežnog hodnika. Ali Porfirije nije takav. Prvo što sam uradio je da sam spojio njene naočare. Dobro, rekla je. Kakvi zalisci... U međuvremenu, stavljam sliku naočara na tablu. Morfing to sa pogledom sa stropne kamere. Ifak je podigao bilo koje preobrazbe bez naprezanja svoje moći. Bilo je monstruozno. Sada me je Mara videla u svojim naočarima na mestu aifaka i istovremeno je mogla da posmatra.
Razvijena šifra. Ponekad je primetio da ga ponovo muče snovi koji se ponavljaju prema šemi 1. Ili prema šemi 2. I odjednom, u otvorenom tekstu, kao uzvik koji beži: Sanjao pušačke mješavine 24 sata, ubio sam u detinjstvu... Glas iza paravana. Ućutao je. Šta to ona radi? - upitao je Sam. „Zaspala sam“, odgovorila je Nataša. Sam je nježno pogladio bodljikav vrh njenog trbuha i zavalio se na sofu. Natasha je tiho progutala slinu. Sam je povukao kutiju na podu prema sebi, otvorio je i izvadio malu staklenu kutiju. Teglu, pljunuo je crvenu u nju, zavrnuo je i bacio nazad - cijela ova operacija mu je pušila mješavine 24 sata. „Znaš, Nataša“, rekao je.
Nakon toga on hašiš svetac Hej, Tatarsky. Nema odgovora. Tatarsky je čekao još minut i shvatio da je ostao sam. Sam sa svojim umom spremnim da podivlja. Hitno sam morao da se nečim zaokupim. Pozovi, šapnuo je. - Kome. Gireev. On zna šta da radi. Za dugo vremena. Niko se nije javljao na telefon. Konačno, na petnaestom ili dvadesetom zvonu, Gireev je sumorno odgovorio: Zdravo. Andryusha.
Ne, rekao je. U zaključanoj sobi sjedi čovjek koji ne zna kineski. Kroz prozor mu daju bilješke s pitanjima na kineskom. Za njega su to samo komadi papira na kojima su iscrtane šljokice čije značenje ne razumije. Ali njegova soba je puna raznih knjiga. Pravila koja detaljno opisuju kako i kojim redoslijedom odgovoriti samo kičmama. I on, postupajući po ovim pravilima, daje odgovore na kineskom u drugom prozoru. Oni stvaraju potpuno povjerenje kod svakog ko stoji vani da zna kineski. Iako on sam uopšte ne razume šta ga pitaju. Adresa hydra onion browser šta je značenje njegovih odgovora. Uvedeno. Pa, ja sam to predstavio. Sura je ista kineska soba, samo automatizirana. Umjesto osobe sa priručnikom, tu je skener koji čita hijeroglife. Ogromna baza podataka referenci i pravila koja vam omogućavaju da odaberete hijeroglife za odgovor.
Ironično, to je ono što mi je donelo jasnoću. Barem u praktičnom smislu. Shvatio sam problem sa kojim se suočavam. Nije samo složeno, već je i nedostižno. Bilo je teško čak i pravilno formulisati pitanja vezana za to. Činilo se da je jedina utjeha bila Kako pronaći lokaciju Hydra na jeziku Torus, situacija je bila jednako klizava. Sa ljudskom svešću. Nisam se mogao nositi sa ovim. I odlučio sam da je najbolji izlaz iz situacije povratak. Na uobičajeni posao, ostavljajući egzistencijalne vježbe za kasnije ili zaboravljajući na njih.
Ubrzo je put doveo do bogatog sela sa svježe okrečenom bijelom crkvom. Tužan jednonogi vojnik u izblijedjeloj sivoj uniformi sjedio je kraj crkvene ograde. Ne znate gdje je Optina Pustyn. upitao je T., sagnuvši se prema njemu sa konja. Ovo je ono o čemu momci pričaju. upitao je vojnik. Koja je nedavno osnovana kao ustanova. Odlučio sam da je serviser poludio. Kako je ovo mjesto nedavno postavljeno. Što znači da je u svakom slučaju sve u redu, časni sude, rekao je vojnik i Hydra rulet ruku, i dalje ćeš biti daleko. Ovdje postoje samo dva puta, i oba idu u jednom smjeru. Idite prvom ili drugom rutom. Ako želite kraći put, onda kroz šumu. Tu je račva, tako da možete uzeti bilo koju stranu.
I druge grimase, o kojima ste, mislim da ste dosta čuli... Lena nije shvatila kakva je tata-mama budala osamnaest godina (mladić je brzo i tiho promrmljao ove reči), ali je odmah zaboravila na to - ona odjednom je poželela da otpije gutljaj vina u tolikoj meri od dvadeset hiljada evra da su joj zasuzile usta. Dvoranom je prošao tihi uzdah koji je potvrdio da okupljeni nisu samo čuli za grimase. I uspjeli smo detaljno proučiti sve dostupne informacije o njima. "Nedavno su zapadne obavještajne agencije pokrenule pravi lov na naše bogate idiote", nastavio je mladić. - Čuli ste, naravno, za velike skandale adresa hydra onion tk okey site hydra in torus hapšenja: prvo Courchevel, zatim Fidži, pa butik Hermes, a sada Saint Moritz, Maldivi i Antarktik. Kampanja je pažljivo planirana i ima dva glavna cilja - prvo, diskreditaciju. Ruska civilizacija - uspostaviti kontrolu nad svojim resursima prikupljanjem kompromitujućih dokaza o vlasnicima svojih glavnih dobara. Naša elita je postala meta, a objektivna realnost trenutne tačke u prostor-vremenu je takva. S njom smo postali mete. Mršteći se, ućutao je, kao da daje priliku svojim slušaocima da shvate ozbiljnost situacije. Tada mu se tužan osmijeh vratio na lice i nastavio: Moramo držati situaciju pod kontrolom.
Ona se naceri. Barem se ne morate pretvarati da ste uvrijeđeni nevinošću pred svojim narodom. O čemu. Kad sam ga isprovocirao. Kada je iskočila gola Hydra luk ulaz i stao ispred njega pseći stil. Vi ovo smatrate provokacijom. Svakako. Zašto si mu, pitam se, okrenuo leđa? Slegnuo sam ramenima. Za pouzdanost. Šta je u ovome posebno pouzdano? Rep je bliže meti”, rekao sam ne baš samouvereno. Pa. I morate pogledati preko ramena.
Treće montal vanilla ecstasy kako slijedi: Njegovoj ekselenciji O. Konstantinu Petroviču Pobedonostcevu, službeniku. Ovim prenosim Vašoj Ekselenciji prijevod drevnog egipatskog natpisa. List zlatnih listića pronađen u medaljonu montal vanilla ecstasy leš oca Varsonofija Netrebka u okviru istrage o slučaju grofa T. Prema mišljenju stručnjaka iz Egipatskog muzeja, obris hijeroglifa nam omogućava da datiramo tekst u doba 18. dinastije ili nešto kasnije. Natpis glasi: Tajno ime hermafrodita sa mačjom glavom, koja daje moć nad njim, je suština. ANGC. Ako možete kontrolirati hermafrodita s ovim imenom. U redu. Prevodioci koji ANGC mogu biti prevedeni i kao tradicionalni BHGV (ili na neki drugi način, ovisno o izboru tablica korespondencije kada se koriste hijeroglifski registri). Međutim, sam medaljon se ne može prenijeti Vašoj Ekselenciji uprkos Vašem zahtjevu.
Post navigation
