Zdravo svima! U ovom članku ćemo pogledati kako pravilno postaviti stilove u javascript i cross-browser.

Dakle, oni od vas koji su već barem malo upoznati sa javascriptom znaju da elementi imaju svojstvo stila, koje pohranjuje objekt, pomoću kojeg možete postaviti određene CSS stilove. Međutim, nije sve tako jednostavno kao što se čini na prvi pogled. A evo i zašto. Napravimo dva vrlo obična div bloka, ali za jedan ćemo postaviti stilove kroz atribut style, a za drugi kroz oznaku style.

div(
širina: 150px;
visina: 150px;
}

#div1 (
pozadina: #f00;
}

Pokušajmo sada prikazati vrijednost pozadinskog svojstva za ove blokove.

Var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
upozorenje(div1.style.background);
upozorenje(div2.style.background);

U prvom slučaju nećemo dobiti ništa, ali za div2 blok bit će prikazani stilovi. Zašto? Stvar je u tome što javascript može prikazati samo vrijednosti onih svojstava koja su postavljena direktno u html oznaci pomoću atributa style i onih koja su postavljena putem javascripta. Ako sada postavimo svojstvo pozadine ovako

Div1.style.background = "#f00";

Sada će vrijednost biti prikazana putem alert .

Alert(div1.style.background);

Isti stilovi koje postavljamo u oznaci stila ili u vanjskoj tablici stilova nazivaju se "izračunati stilovi" ili "izračunati stilovi". Ovo ime su dobili s razlogom. Poenta je u tome da pretraživač prvo čita html oznaku, a zatim izračunava stilove koje smo postavili u eksternoj tablici stilova i primenjuje ih na ovu oznaku.

Međutim, još uvijek im možemo pristupiti. DOM Level2 specifikacija ima nešto za ovo: posebna funkcija getComputedStyle() . Hajde da vidimo kako to radi.

Var styles = getComputedStyle(div1);
upozorenje(styles.background);

Morate mu proslediti element čije stilove želite da dobijete i on će vam vratiti objekat. Sada samo navedite nekretninu koja vam je potrebna i odmah ćete dobiti njenu vrijednost.

Međutim, ova funkcija ne radi sa starijim pretraživačima (IE8- ), pa ako želite da vaš kod bude kompatibilan sa više pretraživača, koristite kod ispod.

Funkcija getStyle(element) (
return window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
}

Upotreba je slična

Var styles = getStyle(div1); upozorenje(styles.background);

Dakle, danas smo naučili kako da radimo sa stilovima u javascriptu i kako da dobijemo stilove među pretraživačima.

Zdravo! U ovom tutorijalu želio bih govoriti o tome kako možete promijeniti stil elementa na web stranici koristeći JavaScript. Mora se reći da se u JavaScript-u obično koriste 2 pristupa za rad sa stilovima:

• Promjena svojstva stila
• Promjena vrijednosti klase elementa

style property

Svojstvo style predstavlja takozvane inline stilove koji će biti prikazani na elementu kroz atribut style. Na primjer, postavimo boju fonta:

Var root1 = document.documentElement; // postavljamo stil root1.style.color = "red"; // dobijemo vrijednost stila document.write(root1.style.color); //red

IN u ovom primjeru Ime svojstva boje je isto kao i isto svojstvo css. Po analogiji, možete postaviti boju pomoću css-a:

Html( boja: crvena; )

Međutim, za one css svojstva koja imaju crticu u nazivu, na primjer, font-size. U JavaScript-u, za ova svojstva, crtica se uklanja, a prvo slovo nakon crtice piše se kao veliko slovo, odnosno velikim slovima

Var root1 = document.documentElement; root1.style.fontFamily = "Arial";

className svojstvo. Rad sa klasama u JavaScript-u.

Koristeći svojstvo kao što je className možete postaviti atribut klase bilo kojeg html element. Evo primjera:

.redStyle( boja:crvena; font-family:Arial; ) .article(font-size:22px; ) Naslov članka

Prvi paragraf

Drugi paragraf

var članak = document.querySelector("div.art"); // postavljanje nove klase article.className = "redStyle"; // dobijemo ime klase document.write(article.className);

Ovo eliminiše potrebu za konfigurisanjem svakog pojedinačnog svojstva koristeći svojstvo style.
Međutim, treba uzeti u obzir da će prethodna vrijednost atributa klase biti izbrisana. Stoga, ako trebate dodati klasu, onda je treba kombinirati sa starom klasom:

Article.className = article.className + "blueStyle";

Ali ako trebate potpuno ukloniti sve klase, svojstvo className možete dodijeliti praznom nizu:

ArticleDiv.className = "";

Svojstvo classList. Dodavanje nove klase elementu.

Iznad smo pogledali kako dodati klase elementu na web stranici, ali za upravljanje velikim brojem klasa zgodnije je koristiti drugo svojstvo, classList. Ovo svojstvo je objekt koji implementira sljedeće metode:

• add(className): će dodati klasu className
• remove(className): će ukloniti class className
• toggle(className): prebacit će klasu elementa u className. Odnosno, ako nema klase, ona će biti dodana, a ako postoji, biće uklonjena.

Var article = document.querySelector("div.art"); // ukloniti klasu article.classList.remove("art"); // dodaj klasu

article.classList.add("redStyle"); // prebaciti klasu
article.classList.toggle("umjetnost");

Rezultati.

Za postavljanje klase koristite metodu className.

Za postavljanje stila elementa putem atributa stila koristi se metoda stila.

Da biste dodali i uklonili klasu elementu, koristite metode classList.add(className) i classList.remove(className).

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

style property

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 svojstvo

Koristeć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 svojstvo

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

I šta kažu, ovi glasovi.

Jedan i. Isto: Ja sam prodavac, ja sam prodavac. Šta ćeš uraditi. sta mozes da uradis. 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.

Wish. Onda samo naprijed, . rekao je Čapajev ustajući iza hotela ecstasy.

Ostavivši službeni vagon, otišli smo do zadnjeg dijela 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. Nigde nije bilo svetla; 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).

Uskoro. upitao je. Kupi hašiš u Vladivostoku, rekao sam, ovde... Neko je izbirljiv. Ljubavnik bi mogao biti uvrijeđen š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 ujedno 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 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 nekoliko sekundi. „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 odgovarati samo ciglama. 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. IN u poslednje vreme Zapadne obavještajne službe pokrenule su pravi lov na naše bogate kretene”, 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 stajao ispred njega u psećem stilu. 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

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) elemenata

Prvi način interakcije s klasama elemenata je korištenje DOM svojstva className.

Ovo svojstvo je odraz atributa klase u DOM-u. DOM svojstvo className nije imenovano class zbog činjenice da se ranije u JavaScript-u nisu mogle koristiti rezervirane riječi za imenovanje svojstava objekata. Ako ne znate šta su DOM svojstva i kako se razlikuju od atributa, onda o tome možete pročitati 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 atribut klase uvijek su međusobno sinkronizirani, što znači da kada se promijeni jedno, mijenja 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 se ne može učiniti tako jednostavno. Ovo će zahtijevati pisanje nekog 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)

Svojstvo 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 povezane s klasama 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 je u nju 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. Korišćenjem za petlju// 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 veoma stare pretraživače (npr. Internet Explorer 8, 9), tada u ovom slučaju možete koristiti neku vrstu polifila.

Stilovi elemenata

U DOM-u svaki element ima svojstvo stila pomoću kojeg možemo kontrolirati njegove stilove. Značenje ove imovine je objekat koji je 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 sa prefiksom pretraživača -webkit-border-radius - kao WebkitBorderRadius.

Uklanjanje stilova

Na primjer, postavimo tijelo na neku boju pozadine:

Document.body.style.backgroundColor = "#eee";

Ako sada treba da uklonimo 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 paragrafs = document.querySelectorAll("p"); za (var i = 0, dužina = paragrafa.dužina; i< length; i++) { paragraphs[i].style.backgroundColor = "green"; } // выведем в консоль все CSS svojstva element sa identifikatorom "introtext" var styleElem = document.querySelector("#introtext").style; for (var i = 0, dužina = styleElem.length; i< length; i++) { console.log(styleElem[i]); }

cssText svojstvo

Pored 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 postavili za njega pomoću atributa style i u njegovom odgovarajućem DOM svojstvu.

Možete izvesti operaciju sličnu onoj koju izvodi svojstvo style.cssText koristeći metodu setAttribute.

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

Zadaci

1. Napišite skriptu koristeći classList da postavite element sa klasom teksta na tri klase: 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-.