Keičiami puslapių stiliai naudojant „JavaScript“


„JavaScript“ dažniausiai naudojama mažiems pakeitimams tinklalapyje reaguoti į kai kuriuos skaitytojo veiksmus. Neseniai susidūriau su situacija, kai norėjau visiškai pakeisti dokumento stilių, atsižvelgiant į tam tikrus veiksnius. Kaip mano įprotis, nusprendžiau parašyti nedidelę programą, kad galėčiau su tuo žaisti. Eksperimentavimo tikslais nusprendžiau dirbti su keliais labai paprastais ir matomais stiliaus pakeitimais. Jei tai būtų mano galutinis tikslas, tikriausiai lengviausia būtų tiesiog atlikti pakeitimus tiesiogiai - pavyzdžiui, nustatant fono spalvą, pasirinkus norimą mano pasirinkimą „document.body.style.background“. Tačiau norėjau naudoti CSS, nes manau, kad tai yra paprasčiau atliekant didelius masto pakeitimus (taip pat todėl, kad paprasčiau tiesiog iškirpti ir įklijuoti CSS, kai matote kai kuriuos, kurie jums patinka!)

DIZAINAS:
Aš gana dažnai naudoju eilutės stiliaus lapelius su žyma, todėl tai ir panaudojau savo eksperimentui. Norėdami tai patvirtinti, į savo puslapio antraštę įdėjau tuščią stiliaus žymų rinkinį. Kadangi tai yra eksperimentas ir noriu pakartotinai naudoti kodą didesniems projektams, nusprendžiau atlikti pakeitimus naudodamas funkciją. Mano funkcija „change_style“ pasirenka norimą stilių CSS sintaksėje kaip argumentą, kurį ji nustato kaip turinį tarp atidarymo ir uždarymo stiliaus žymų, priskirdama jį „document.getElementsByTagName“ („stilius“) [0] .innerHTML.

Eksperimento tikslais nusprendžiau naudoti mygtukus, kad suaktyvintumėte pakeitimus. Aš sukūriau keturis mygtukus, kurie iškviečia mano funkciją su skirtingais argumentais, įskaitant vieną, kuris nustato, kad stilius vėl tampa tuščias.

KODAS:
Mano galutinis kodas atrodė taip:




Kintantis stilius



funkcijos keitimas_style (naujas_style) {
document.getElementsByTagName ('stilius') [0] .innerHTML = new_style;
}



Paspauskite mygtuką norėdami pakeisti stilių













DISKUSIJA:
Tai gerai veikia, tačiau greitai tampa sudėtinga, nes turite daugiau informacijos apie stilių. Manau, kad geresnis sprendimas šiuo atveju būtų naudoti išorinius stiliaus lapus. Panašu, kad stiliaus žymė yra naudingesnė, jei norite pridėti ar pakeisti vieną ar du elementus stiliaus lape. Pasinaudojus CSS kaskadiniu požymiu, tai galima padaryti paprasčiausiai pakeitus funkciją naudoti sujungimo operatorių (. =), Kad būtų galima pridėti naują informaciją prie stiliaus etikečių.
Tai lemia šią funkciją:

funkcijos keitimas_style (naujas_style) {
document.getElementsByTagName ('stilius') [0] .innerHTML. = new_style;
}

Abiem atvejais darome prielaidą, kad dokumente yra vienas ir tik vienas stiliaus žymų rinkinys. Tai atrodo pagrįsta prielaida, bet kas, jei turėtumėte skirtingo stiliaus lapus spausdinimui, palyginti su ekranu? Kaip jūs žinote, kad keičiate teisingą?

NUORODA:
Stiliaus lapai HTML dokumentuose - iš W3C

JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo (Gruodis 2020)



Žymos Straipsnis: Keičiami puslapių stiliai naudojant „JavaScript“, „JavaScript“, „Java“, CSS, interneto svetainių kūrimą, internetinio dizaino apvalkalus, tinklalapių apvalkalus, tinklalapių apvalkalus, „javascript“ stilius, įterptinius stilius, html, xhtml, xml