Dünaamiline stiil – CSS-juhtimine JavaScriptiga. Toimingud JavaScripti elemendiklasside ja stiilidega CSS-i omaduste muutmine JavaScripti abil

Viimati värskendatud: 1.11.2015

JavaScripti elemendistiili atribuutidega töötamiseks on peamiselt kaks lähenemisviisi:

    Stiili omaduse muutmine

    Klassi atribuudi väärtuse muutmine

stiilis vara

Stiili atribuut esindab keerulist stiilijuhtimisobjekti ja kaardistab otse html-elemendi stiiliatribuudiga. See objekt sisaldab CSS-i atribuutide komplekti: element.style.CSS atribuut. Näiteks määrame fondi värvi:

Var root = document.documentElement; // määrake stiil root.style.color = "sinine"; // laadi väärtuse hankimine document.write(root.style.color); //sinine

Sel juhul on värvi omaduse nimi sama, mis css-i omadus. Samamoodi saaksime värvi määrata css-i abil:

HTML (värv: sinine; )

Paljude css-i atribuutide nimedes on aga sidekriips, näiteks font-family . JavaScript ei kasuta nende omaduste jaoks sidekriipsu. Ainult esimene täht pärast sidekriipsu teisendatakse suurtähtedeks:

Var root = document.documentElement; root.style.fontFamily = "Verdana";

atribuut className

Atribuudi className abil saate määrata HTML-elemendi klassi atribuudi. Näiteks:

.blueStyle(värv:sinine; fondiperekond:Verdana; ) .article(fondi suurus:20px; ) Artikli pealkiri

Esimene lõik

Teine lõik

var articleDiv = document.querySelector("div.artikkel"); // uue klassi määramine artikliDiv.className = "blueStyle"; // hankige klassi nimi document.write(articleDiv.className);

Klasside kasutamisel ei pea te iga üksikut css-i atribuuti stiili atribuudi abil konfigureerima.

Kuid tuleb arvestada, et klassi atribuudi eelmine väärtus kustutatakse. Seega, kui meil on vaja klassi lisada, peame selle nime ühendama vana klassiga:

ArtikkelDiv.className = artikliDiv.className + "blueStyle";

Ja kui teil on vaja kõik klassid täielikult eemaldada, saate atribuudile määrata tühja stringi:

ArtikkelDiv.className = "";

klassiloendi omadus

Eespool arutasime, kuidas elemendile klasse lisada, kuid mitme klassi haldamiseks on palju mugavam kasutada atribuuti classList. See atribuut tähistab objekti, mis rakendab järgmisi meetodeid:

    add(klassinimi) : lisab klassi klassinimi

    remove(className) : eemaldab klassi klassinimi

    toggle(className) : Lülitab elemendi klassi klassi nimi. Kui klassi pole, siis lisatakse, kui on, siis eemaldatakse

Näiteks:

Var articleDiv = document.querySelector("div.artikkel"); // eemaldage klass articleDiv.classList.remove("artikkel"); // lisage klass articleDiv.classList.add("blueStyle"); // lülitab klassi artikliDiv.classList.toggle("artikkel");

Selles artiklis vaatleme erinevaid meetodeid elemendiklasside ja stiilidega töötamiseks. Tutvume atribuutidega classList ja style ning näidetega nende kasutamisest vastavalt lehel olevate elementide klasside ja stiilide haldamiseks.

Elemendiklassi(de) haldamine

Esimene viis elemendiklassidega suhtlemiseks on kasutada atribuuti className DOM.

See omadus peegeldab DOM-i klassiatribuuti. Atribuuti className DOM ei nimetatud klassiks, kuna varem ei saanud JavaScriptis reserveeritud sõnu kasutada objektide omaduste nimetamiseks. Kui te ei tea, mis on DOM-i atribuudid ja kuidas need atribuutidest erinevad, saate selle kohta lugeda sellest artiklist.

Näide, milles teeme elemendiklassiga erinevaid toiminguid, kasutades DOM-i atribuuti className:

var elem = document.querySelector("#alert"); // klassi lisamine elemendile elem.className = "alert"; // "alert" // elemendi klassi muutmine elem.className = "alert-warning"; // "alert-warning" // hankige klassi väärtus ja salvestage see kaustas className var classElem = elem.className; // "alert-warning" // eemaldage klass elemendist elem.className = ""; // ""

Teine viis elemendi klassiga seotud toimingute tegemiseks on atribuutidega manipuleerimise meetodite kasutamine.

Näide, milles teeme ülaltoodud koodiga samu toiminguid, kuid kasutades atribuutide haldamiseks meetodeid:

var elem = document.querySelector("#alert"); // klassi lisamine elemendile elem.setAttribute("class", "alert"); // elemendi klassi muutmine elem.setAttribute("class", "alert-warning"); // hankige klassi väärtus ja salvestage see kaustas className var classElem = elem.getAttribute("klass"); // "alert-warning" // klassi eemaldamine elemendist elem.removeAttribute("class");

DOM-i atribuut className ja klassi atribuut on alati omavahel sünkroonitud, mis tähendab, et kui üks muutub, muutub ka teine.

Näiteks ühe kindla klassi olemasolu elemendis ülaltoodud meetodite abil ei saa enam nii lihtsalt teha. See nõuab teatud koodi kirjutamist.

Näide, milles kontrollime, kas elemendil on klass content__show:

... var elem = document.querySelector("#content");

if ((" " + elem.className + " ").indexOf(" content__show ") > -1) ( // elemendil on klass content__show) else ( // elemendil ei ole klassi sisu__show)

Kuid peale selle olukorra on ka teisi. Näiteks kui peate elemendile lisama ühe kindla klassi või selle eemaldama. Nende ja muude toimingute väga lihtsaks tegemiseks on elemendil nende juhtumite jaoks spetsiaalne DOM-i atribuut classList.

klassiloendi omadus

Atribuut classList on spetsiaalne objekt (DOMTokenList), mis sisaldab meetodeid erinevate toimingute tegemiseks elemendi klassidega.

  • klassiloendi meetodid:
  • .add(klassiNimi1[,klassiNimi2,...]) – lisab elemendile ühe või mitu määratud klassi. Kui elemendil see klass juba on, siis seda sinna ei lisata.
  • .remove(klassiNimi1[,klassiNimi2,... ]) – eemaldab elemendist ühe või mitu määratud klassi. Kui elemendil pole klassi, mida soovite eemaldada, siis toimingut ei võeta.
  • .contains(className) – kontrollib, kas elemendil on klass; tagastab vastusena tõese või väära.

.toggle(klassiNimi [,lipp]) - lülitab elemendi määratud klassi nime, st. kui elemendil on see klass, siis eemaldab selle; muidu lisab. Teine parameeter (lipp) on valikuline. Vaikimisi on see määratud määramata . Kui määrate selle väärtuseks true või false , töötab see nagu lisamise või eemaldamise meetod, st. kas lisada elemendile klass või eemaldada üks sellest.

// hankige element id = "külgriba" var sideBar = document.querySelector("#sidebar"); // lülitame elemendi hiid-xs klassi, st. kui elemendil see on, siis eemaldage see; ja kui seda klassi pole olemas, siis lisa see sinna sideBar.classList.toogle("hidden-xs"); // lisage sideBarile kolm täiendavat klassi element.classList.add("col-xs-6","col-sm-4","col-md-3"); // eemaldage sideBarist klass hidden-xs element.classList.remove("hidden-xs"); // kontrollige, kas elemendil on klass hidden-lg ja kui on, lisage sellele veel üks hidden-md if (sideBar.classList.contains("hidden-lg") ( myID.classList.add("hidden-md" ; )

Objektiks classList on pseudomassiiv, st. seda saab itereerida massiivina.

Näide, milles kordame kõiki klassiloendi klasse:

... var sisu = document.querySelector(.content"); // Valik nr 1. Kasutades for-silmust // classList.length - elemendi klasside arv // loendis olevad klassid loetakse 0-st (var i = 0, pikkus = sisu.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); }

Atribuuti classList toetavad kõik kaasaegsed brauserid. Kui vajate tuge väga vanade brauserite jaoks (näiteks Internet Explorer 8, 9), saate sel juhul kasutada mõnda tüüpi polüfilli.

Elementide stiilid

DOM-is on igal elemendil stiiliomadus, mille abil saame selle stiile juhtida. Selle atribuudi väärtus on kirjutuskaitstud objekt. Elemendi stiilide määramine toimub sel juhul, lisades sellele sobivad omadused.

Näide selle kohta, kuidas saate DOM-i stiili atribuudi kaudu elemendile stiile lisada:

Ruut var square = document.querySelector(.ruut"); square.style.width = "170px"; square.style.height = "170px"; square.backgroundColor = "roheline";

Stiiliobjekti omaduste nimed on tavaliselt samad, mis CSS-i atribuutide nimed. Ainsad erandid on need CSS-i atribuudid, mis kasutavad sidekriipsu. Näiteks taustavärv . Sel juhul asendatakse sidekriips ja sellele järgnev täht suurtähtedega. Näiteks stiiliobjekti CSS-i taustavärvi atribuudiks määratakse backgroundColor . Ja näiteks CSS-i atribuut brauseri eesliitega -webkit-border-radius - nagu WebkitBorderRadius.

Stiilide eemaldamine

Näiteks määrame kehale taustavärvi:

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

Kui meil on nüüd vaja see stiil eemaldada, siis selleks peame lihtsalt määrama sellele tühja stringi:

Document.body.style.backgroundColor = "";

Näited DOM-stiili atribuudi kasutamisest elementide stiilide määramiseks.

// määrake id = "introtext" elemendi teksti värv punaseks, kasutades stiili document.querySelector("#introtext").style.color = "red"; // määrake lehel kõik p elemendid stiili abil, et määrata teksti värviks roheline var lõigud = document.querySelectorAll("p"); for (var i = 0, pikkus = lõigud.pikkus; 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 atribuut

Lisaks elemendi stiilide individuaalsele määramisele saame need kohe määrata spetsiaalse atribuudi style.cssText abil. Selleks määratakse sellele atribuudile string, mis koosneb semikooloniga eraldatud stiilide komplektist. Need. Seda tehakse sarnaselt HTML-i stiili atribuudi stiilide määramisega.

Näide, milles määrame stiilid "font-size:40px; color:blue;" elemendid koos sissejuhatava klassiga:

//hankige elemendid sissejuhatava klassiga var intro = document.querySelectorAll("intro"); //määra "font-size:40px; color:blue;" kõik elemendid kogus, mis sisalduvad intros jaoks (var i = 0, pikkus = intro.length; i< length; i++) { intro[i].style.cssText = "font-size:40px; color:blue;"; }

Peate olema ettevaatlik stiilide määramisel atribuudi style.cssText abil. See on tingitud asjaolust, et kui see on määratud, eemaldab see atribuut kõik elemendi stiilid. Need. need, mille me sellele atribuudi style ja vastavas DOM-i atribuudis kasutades määrame.

Saate teha ka atribuudi style.cssText tehtule sarnase toimingu, kasutades meetodit setAttribute.

Näiteks:

//hankige esimene element sissejuhatava klassiga var info = document.querySelector("info"); //määrake selle stiiliks "margin: 10px; padding: 10px; border: 1px solid green;" info.setAttribute("style", "margin: 10px; polster: 10px; border: 1px solid green;");

Ülesanded

1. Kirjutage klassiloendi abil skript, et määrata tekstiklassiga elemendile kolm klassi: suurus-40 , värv-punane ja bg-kollane:

.size-40 ( font-size: 40px; ) .color-red ( värv: punane; ) .bg-yellow ( taust: kollane; )

Natuke teksti...

2. Kirjutage kood stiili "laius: 180px; kõrgus: 180px;" määramiseks. kõik elemendid lehel klassiga, mis algab sõnadega block- .

Kirjeldus

Stiili atribuut tähistab HTML-elemendi globaalset stiiliatribuuti. Stiili atribuudi väärtus on objekt CSSStyleDeclaration, mis sisaldab kogu HTML-elemendi stiiliteavet, mis on elemendile lisatud globaalse stiiliatribuudi kaudu. Objekti CSSStyleDeclaration atribuudid on CSS-i atribuudid.

HTML-elemendi stiilide muutmiseks või uute stiilide lisamiseks peate kasutama atribuuti, mille nimi ühtib selle CSS-i atribuudi nimega, mille väärtust soovite muuta. Näiteks elemendi tekstisisu kuvamiseks punase kaldkirjaga kirjas, saate käivitada järgmised juhised.

Elem.style.fontStyle = "kaldkiri"; elem.style.color = "punane";

Pange tähele, et kõik objekti CSSStyleDeclaration atribuutide väärtused tuleb määrata stringidena. Näiteks laadilehele või stiiliatribuudile võite kirjutada:

Värv: punane; fondi suurus: 50 pikslit; tekst-kaunistus: allajoonimine;

Sama tegemiseks JavaScriptis peate lisama kõik väärtused jutumärkidesse:

Elem.style.color = "punane"; elem.style.fontSize = "50px"; elem.style.textDecoration = "allajoonitud";

Pange tähele, et semikoolonid ei sisaldu stringiväärtustes. CSS-is kasutatavaid semikooloneid pole vaja JavaScripti abil määratud stringiväärtustes.

Paljud CSS-i atribuudid, näiteks tekstidekoratsioon, sisaldavad oma nimedes sidekriipsu. JavaScriptis tõlgendatakse sidekriipsu miinusoperaatorina, seega allolev väide ei tööta:

Elem.style.text-decoration = "ülejoon";

Seega on objekti CSSStyleDeclaration atribuutide nimed veidi erinevad tegelike CSS-i atribuutide nimedest. Kui CSS-i atribuudi nimi sisaldab sidekriipse, moodustatakse CSSStyleDeclarationi objekti atribuudi nimi, eemaldades kõik sidekriipsud ja kirjutades igale sidekriipsule vahetult järgnevad suurtähed. Näiteks JavaScripti list-style-type CSS-i atribuut näeks välja nagu listStyleType.

Lisaks, kui CSS-i atribuudil (nt float) on nimi, mis ühtib JavaScripti reserveeritud sõnaga, lisatakse nime eesliide "css", et luua kehtiv atribuudi nimi. See tähendab, et CSS-i float-atribuudi lugemiseks või muutmiseks peaksite kasutama atribuuti cssFloat.

Kui kasutate HTML-elemendi stiiliteabe lugemiseks CSSStyleDeclarationi objekti atribuute, tagastavad tähenduslikku teavet ainult need atribuudid, mille väärtused on eelnevalt skripti poolt määratud või stiiliatribuudiga määratud.

JavaScripti tekstisisene elementide stiil on kasulik ainult stiilide määramisel. Elemendi stiiliteabe saamiseks (kõikide elemendile seatud CSS-i atribuutide väärtused) peate kasutama meetodit window.getComputedStyle().

Näidis dokumendi pealkiri

See on lõik.

Muuda teksti

funktsioon foo() ( var x = document.getElementById("test"); var color = " - teksti värv: " + x.style.color; var bold = ".
Ja nüüd on tekst paksus kirjas."; x.innerHTML += color + bold; x.style.fontWeight = "paks"; )

Ja mis nad ütlevad, need hääled.

Üks ja. Sama: olen müüja, olen müüja. Mida sa teed. Mida saate teha. Jah, Hydra sibul Venemaal 2016. Ja see tähendab, et Bull Gates ei võta ühendust. Ei tööta.

Või äkki ta tuleb. Aga sa ei saa aru. Võib-olla on Minotauros see surnud rott laes. . Võib-olla nii.

Ja nad ei selgitanud sulle midagi. Ja see tähendab eriprotseduuri. Läksin siis pimedas. Vaesed kitsed... Noh, pole midagi, me mõistame selle välja ja karistame süüdlasi. See jääb neile

Aastaks 2003 Jaapani spetsialistid. Oli võimalik välja töötada mitmest mikrosondist koosnev komplekt, mis ühendas otseselt aju ja võimaldas mingil määral objektistada inimese tajupilti. Jaapani seadmed ei suutnud kindlaks teha, mida täpselt vaadeldav tundis ja mõtles. Kuid see võimaldas saada värvilise (ehkki uduse) pildi sellest, mida ta vape hüdra. Ja mitte ainult tegelikkuses, vaid ka kiires unefaasis. See sai võimalikuks, kuna signaal ei võetud mitte nägemisnärvist, vaid nendest tsoonidest. Ajud, mis vastutavad otsese esituse eest. Varustuse ostis kohe Potašinski meeskond. Ajju siirdatud sondide komplekti signaali saab edastada juhtmevabalt. Ühendused, mis võimaldasid bablonaudil elada normaalset elu, mida katses osalemine ei piiranud. Oli vaja ainult, et kuskil läheduses asuks signaali vastuvõtja. Mis siis reaalajas infot arvutisse edastas. Lühidalt nägi Potashinsky katsete skeem välja järgmine: Esmalt implanteeriti bablonautist-eksperimenteerija ajju kontrollelektroodide komplekt (vabatahtlikud valiti sellesse rolli FSB noorte ohvitseride hulgast, nagu tavaliselt).

Surnud punktist. Kuule, vend," ütles ta, "mis loodus see on?" Millest sa räägid? - küsis Isa. Noh, sa ütlesid autos, et killustunud kerel on sama olemus kui vikerkaarel. Ja mis loodus see on? Parem ära küsi selle kohta. Vend,” kortsutas Isa kulmu. Miks. Sa pole selleks veel valmis. Kuidas mitte valmis. Ja amfetamiin ja marihuaana korraga.

Kui ma oleksin valmis, siis ma ei küsiks. Nii et saate vastata. Või.

Varsti. küsis. Osta nüüd Vladivostokis hašišit, ma ütlesin, siit... Keegi on valiv. Armastaja võib solvuda, et teda võrgukorikust kaugemale ei lasta. Kuid Porfiry pole selline. Esimene asi, mida ma tegin, oli ühenduse loomine tema prillidega. Hästi, ütles ta. Mis kõrvetised... Vahepeal panen paneelile prillide pildi. Morphing seda laekaamera vaatega. Ifak ​​tõstis mingeid morfe ilma oma jõudu pingutamata. See oli koletu. Nüüd nägi Mara mind oma ogment-prillides aifaki asemel ja sai samal ajal jälgida. Arenenud šifr. Mõnikord märkis ta, et teda piinavad jälle korduvad unenäod skeemi 1 järgi. Või 2. skeemi järgi. Ja järsku avatud tekstis nagu karje, mis pääses: Nägin unes minu poolt lapsepõlves tapetud... Hääl ekraani taga. Ta jäi vait. Mida ta teeb? - küsis Sam. "Ma jäin magama," vastas Nataša. Sam silitas õrnalt tema kipitavat kõhuotsa ja nõjatus diivanile. Nataša neelatas vaikselt. Sam tõmbas põrandal oleva korpuse enda poole, avas selle ja võttis välja väikese klaasvitri. Purk, sülitas ta sinna punaseks, keeras kinni ja viskas tagasi – kogu see operatsioon võttis tal ööpäevaringselt suitsusegusid suitsetama. "Tead, Nataša," ütles ta.

Pärast seda ta hašiši pühak Tere, Tatarsky. Vastust pole. Tatarski ootas veel minuti ja sai aru, et ta on üksi jäetud. Üksi oma mõistusega, valmis metsikuks minema. Mul oli kiiresti vaja end millegagi hõivata. Helista, sosistas ta. - Kellele. Girejev. Ta teab, mida teha. Pikaks ajaks. Keegi telefonile ei vastanud. Lõpuks, viieteistkümnendal või kahekümnendal helin, vastas Girejev süngelt: Tere. Andriusha.

Ei, ütles ta. Lukustatud ruumis istub mees, kes ei oska hiina keelt. Nad annavad talle läbi akna hiinakeelsete küsimustega märkmeid. Tema jaoks on need lihtsalt paberitükid, millele on joonistatud vingerpussi, mille tähendust ta ei mõista. Tema tuba on aga erinevaid raamatuid täis. Reeglid, mis kirjeldavad üksikasjalikult, kuidas ja millises järjestuses lihtsalt sikutades vastata. Ja ta, tegutsedes nende reeglite järgi, annab vastuseid hiina keeles teises aknas. Need loovad kõigis väljas seisvates täieliku kindlustunde, et ta oskab hiina keelt. Kuigi ta ise ei saa üldse aru, mille kohta nad temalt küsivad. Aadress hüdra sibulabrauser, mis on tema vastuste tähendus. Tutvustatakse. No ma tutvustasin seda. Sura on sama Hiina tuba, ainult automatiseeritud. Teatmeteostega inimese asemel on skanner, mis loeb hieroglüüfe. Tohutu andmebaas viidetest ja reeglitest, mis võimaldavad valida vastuse jaoks hieroglüüfe.

Iroonilisel kombel tõi see mulle selguse. Vähemalt praktilises mõttes. Sain aru, mis probleem mu ees seisan. See pole lihtsalt keeruline, see on tabamatu. Raske oli isegi sellega seotud küsimusi õigesti sõnastada. Ainus lohutus näis olevat Kuidas leida tooruse keeles Hydra saiti, olukord oli sama libe. Inimese teadvusega. Ma ei saanud sellega hakkama. Ja otsustasin, et parim väljapääs olukorrast on naasta. Tavapärasele ärile, jättes eksistentsiaalsed harjutused hilisemaks või unustades need.

Peagi viis tee rikkasse külla, kus oli värskelt maalitud valge kirik. Kurb ühejalgne pleekinud hallis mundris sõdur istus kirikuaia lähedal. Sa ei tea, kus Optina Pustyn on. küsis T. hobuse seljast tema poole kummardades. See on see, millest poisid räägivad. küsis sõdur. Mis asutati hiljuti asutusena. Otsustasin, et teenindaja on endast väljas. Kuidas see koht hiljuti rajati. Mis tähendab, et igal juhul on kõik otse, teie au, ütles sõdur ja Hüdra rulett käsi, sa oled ikka kaugel. Siin on ainult kaks teed ja mõlemad lähevad ühes suunas. Valige esimene või teine ​​marsruut. Kui tahad lühemat teed, siis läbi metsa. Seal on kahvel, nii et võite võtta mõlemalt poolt.

Ja muud grimassid, millest olete vist palju kuulnud... Lena ei saanud aru, mis issi-emme loll kaheksateist on (noormees pomises need sõnad kiiresti ja vaikselt), aga unustas selle kohe ära – ta tahtis järsku juua lonksu kahekümne tuhande euro väärtuses veini, et suu jooksis vett jooksma. Saalis käis läbi vaikne ohkamine, mis kinnitas, et grimassidest pole kokkutulnud ainult kuulnud. Ja meil õnnestus kogu nende kohta saadaolevat teavet väga üksikasjalikult uurida. "Lääne luureteenistused on hiljuti alustanud tõelist jahti meie rikastele idiootidele," jätkas noormees. - Olete muidugi kuulnud suurtest skandaalidest hüdra sibula aadress tk okey sait hüdra torus arreteerimised: esmalt Courchevel, siis Fidži, siis Hermesi butiik ja nüüd Saint Moritz, Maldiivid ja Antarktika. Kampaania on hoolikalt planeeritud ja sellel on kaks peamist eesmärki – esiteks diskrediteerida. Vene tsivilisatsioon - kontrolli oma ressursside üle, kogudes kompromiteerivaid tõendeid oma põhivarade omanike kohta. Meie eliit on saanud sihtmärgiks ja praeguse aegruumi punkti objektiivne reaalsus on selline, et. Me saime temaga sihtmärkideks. Kulmu kortsutades jäi ta vait, justkui andes kuulajatele võimaluse mõista olukorra tõsidust. Siis naasis kurb naeratus tema näole ja ta jätkas: Me peame olukorra kontrolli all hoidma.

Ta irvitas. Vähemalt ei pea te oma inimeste ees teesklema, et olete süütuse pärast solvunud. Mille kohta. Kui ma teda provotseerisin. Kui ta sealt alasti välja hüppas Hüdrasibula sissepääs ja seisis tema ees doggy style. Peate seda provokatsiooniks. Kindlasti. Huvitav, miks sa talle selja pöörasid? Kehitasin õlgu. Usaldusväärsuse nimel. Mis on selles eriti usaldusväärne? Saba on sihtmärgile lähemal,” ütlesin ma mitte päris enesekindlalt. Noh. Ja sa pead vaatama üle õla.

Kolmandaks montaal vanilje ecstasy järgmiselt: Tema Ekstsellents O. Konstantin Petrovitš Pobedonostsev, ametnik. Käesolevaga edastan Teie Ekstsellentsile Vana-Egiptuse raidkirja tõlke. Medaljonist leitud kuldleht montaal vanilje ecstasy isa Varsonofiy Netrebko surnukeha krahv T juhtumi uurimise raames. Egiptuse muuseumi spetsialistide sõnul võimaldab hieroglüüfide piirjoon teksti dateerida 18. dünastia ajastusse või veidi hilisemasse aega. Pealdis kõlab: Kassipeaga hermafrodiidi salanimi, mis annab tema üle võimu, on olemus. ANGC. Kui suudad selle nimega hermafrodiiti juhtida. Hästi. Tõlkijad, et ANGC-d saab tõlkida ka traditsiooniliseks BHGV-ks (või muuks, olenevalt vastavustabelite valikust hieroglüüfregistrite kasutamisel). Medaljoni ennast ei saa aga teie ekstsellentsile teie soovist hoolimata üle anda.

Postituse navigeerimine

Tere! Selles õpetuses tahaksin rääkida sellest, kuidas saate JavaScripti abil veebilehel elemendi stiili muuta. Peab ütlema, et JavaScriptis kasutatakse stiilidega töötamiseks reeglina kahte lähenemisviisi:

  • Stiili omaduse muutmine
  • Elemendi klassi väärtuse muutmine

stiilis vara

Stiili atribuut esindab niinimetatud sisemisi stiile, mis kuvatakse elemendil stiiliatribuudi kaudu. Näiteks määrame fondi värvi:

Var root1 = document.documentElement; // määrake stiil root1.style.color = "red"; // laadi väärtuse hankimine document.write(root1.style.color); // punane

Selles näites on värvi atribuudi nimi sama, mis sama css-i omadus. Analoogia põhjal saate värvi määrata css-i abil:

HTML (värv: punane; )

Nende css-i atribuutide puhul, mille nimes on aga sidekriips, näiteks font-size. JavaScriptis eemaldatakse nende atribuutide puhul sidekriips ja esimene täht pärast sidekriipsu kirjutatakse suure tähena, st suurtähtedega

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

atribuut className. JavaScripti klassidega töötamine.

Kasutades atribuuti, näiteks className, saate määrata klassi atribuudi mis tahes HTML-elemendile. Siin on näide:

.redStyle(värv:punane; fondiperekond:Arial; ) .article(fondi suurus:22px; ) Artikli pealkiri

Esimene lõik

Veel üks lõik

var article = document.querySelector("div.art"); // uue klassi seadistamine article.className = "redStyle"; // hankige klassi nimi document.write(article.className);

See välistab vajaduse konfigureerida iga individuaalset atribuuti stiili atribuudi abil.
Siiski tuleb arvestada, et klassi atribuudi eelmine väärtus kustutatakse. Seega, kui teil on vaja klassi lisada, tuleks see kombineerida vana klassiga:

Artikli.klassiNimi = artikli.klassiNimi + "blueStyle";

Kuid kui teil on vaja kõik klassid täielikult eemaldada, saate määrata atribuudi className tühjale stringile:

ArtikkelDiv.className = "";

Klassiloendi atribuut. Elemendile uue klassi lisamine.

Eespool vaatlesime, kuidas veebilehel elemendile klasse lisada, kuid suure hulga klasside haldamiseks on mugavam kasutada mõnda muud classList atribuuti. See atribuut on objekt, mis rakendab järgmisi meetodeid:

  • add(className): lisab klassi klassinimi
  • remove(className): eemaldab klassi klassinimi
  • toggle(className): lülitab elemendi klassi klassi nimi. See tähendab, et kui klassi pole, siis see lisatakse ja kui on, siis see eemaldatakse.

Var artikkel = document.querySelector("div.art"); // eemaldage klass article.classList.remove("kunst"); // klassi lisamine

article.classList.add("redStyle"); // klassi vahetamine
article.classList.toggle("kunst");

Tulemused.

Klassi määramiseks kasutage meetodit className.

Elemendi stiili määramiseks stiiliatribuudi kaudu kasutatakse stiilimeetodit.

Elemendile klassi lisamiseks ja eemaldamiseks kasutage meetodeid classList.add(klassinimi) ja classList.remove(klassinimi).