Enne jätkamist on oluline selgitada, miks me eelistame esmase võimalusena kasutada Javascripti, et muuta elementide CSS-i. Tavalistes olukordades mõjutab stiil lehe laadimisel, mis on suurepärane ja enamasti just see, mida soovime.

Kuid meie sisu muutudes interaktiivsemaks ilmnevad paljud olukorrad, kus me tahaksime, et stiilid rakenduksid dünaamiliselt vastavalt kasutaja sisendile, teatud koodi käitumisele või muudele sündmustele. Sellistes olukordades ei piisa pelgalt stiilireeglitest või sisekujundusega seotud stiilidest. Kuigi CSS-i pseudovalijad, näiteks “hover“, pakuvad mõningast tuge, jääme sellegipoolest piiratuks oma võimalustega.

Lahendus, mille poole me nende olukordade lahendamiseks pöördume, hõlmab Javascripti. Javascript võimaldab meil mitte ainult mõjutada elementide stiili, millega me suhtleme, vaid veelgi olulisem on see, et see võimaldab stiilida elemente kogu lehel. See avab meie ees võimsad võimalused, mis ületavad CSS-i piiratud võimet stiilitada sisu ainult selle sees (või selle lähedal).

Vaatame selles peatükis kuidas muuta ja eemaldada CSS omadusi ja nende väärtusi ning kuidas lisada ja eemaldada klasse.

CSS stiilide muutmine

Esimene võimalus, kuidas Javascript saab muuta kujundust, on otse määrata CSS-i omadus elemendile. Võimalus otseselt uus stiil või muuta olemasolevat. Iga HTML-element, millele JavaScripti abil juurde pääsete, omab atribuuti “style“. See objekt võimaldab teil määrata CSS-i omaduse ja selle väärtuse. Eelmises peatükis õppisime, et setAttribute abil on ka võimalik stiili muuta. Võtame lihtsa HTML näite, kus pealkirjal on lisatud värv.

<h1 style="color:blueviolet">CSS vormindamine</h1>

1 2	<h1 style="color:blueviolet">CSS vormindamine</h1>

Ja muudame selle atribuuti ja omadust

const title = document.querySelector("h1");
title.setAttribute("style", "border: 1px solid");

const title = document.querySelector("h1");

title.setAttribute("style", "border: 1px solid");

Ja kui nüüd vaatad lähtekoodi, siis setAttribute kaotas ära kõik olemasolevad stiilid. See võib põhjustada soovimatuid tulemusi või probleeme stiilide rakendamisel. Stiilide loetlemiseks saate kasutada elementi style omadust, näiteks title.style, mis tagastab Javascripti objekti, kus võtmetena on CSS omadused ja vastavate väärtustena nende vormindamise väärtused.

const title = document.querySelector("h1");
console.log(title.style);

const title = document.querySelector("h1");

console.log(title.style);

Ja kui nüüd konsooliakent vaadata, siis näed kõikvõimalikke laade ja need, mis on aktiivsed on välja toodud (Firefox ja Chrome näitavad natuke erinevalt)

Konkreetselt ühe omaduse väärtuse saamiseks saate seda teha, kasutades samuti style omadust koos konkreetse omaduse nimega, näiteks title.style.color, mis tagastab tekstivärviks määratud väärtuse. Ja sellele omadusele saame lisada nüüd oma väärtuse:

const title = document.querySelector("h1");
title.style.color = "blue";

const title = document.querySelector("h1");

title.style.color = "blue";

Kui deklareerite sama stiili omaduse uuesti, siis uus väärtus asendab eelmise. Näiteks title.style.color = "blue"; muudab tekstivärvi sinised ja eemaldab selle “blueviolet”.

Kui soovite Javascriptis määrata CSS-omadust, mis sisaldab sidekriipsu, eemaldage lihtsalt sidekriips. Näiteks background-color muutub backgroundColor-iks, border-radius muutub borderRadius-iks, font-size mutub fontSize ja nii edasi. Samuti on teatud Javascripti sõnad reserveeritud ja neid ei saa otse kasutada. Üks näide CSS-omadusest, mis kuulub sellesse erikategooriasse, on float. CSS-is on see paigutusomadus, kuid Javascriptis tähistab see midagi muud. Selleks, et kasutada täielikult reserveeritud omadust, mille nimi on kokku varutud, eelista omadust css. Näiteks float muutub cssFloat-iks.

const title = document.querySelector("h1");
title.style.color = "blue";
title.style.backgroundColor = "coral";
title.style.fontSize = "50px"

const title = document.querySelector("h1");

title.style.color = "blue";

title.style.backgroundColor = "coral";

title.style.fontSize = "50px"

Kui lisate tühjad jutumärgid, siis see tõlgendatakse kui tühja stringi ja omadus kustutatakse. Näiteks title.style.color = ""; eemaldab tekstivärvi stiili, mis tähendab, et see pöördub tagasi vaikimisi värvi või päritud värvi poole.

title.style.color = "";

1 2	title.style.color = "";

CSS muutujate muutmine

Javascripti abil saad saad muuta ka CSS muutujaid, mida tuntakse ka kui Custom Properties (var). Näiteks on meil vormindatud h1 pealkiri

        <style>
            :root {
                --main-color: blueviolet;
                --font-size: 32px;
            }

            h1 {
                color: var(--main-color);
                font-size: var(--font-size);
            }
        </style>

<style>

:root {

--main-color: blueviolet;

--font-size: 32px;

}

h1 {

color: var(--main-color);

font-size: var(--font-size);

}

</style>

Muutuja väärtust saate muuta Javascriptis kasutades setProperty() meetodit. Lihtsalt lisa omaduse ette -- ja siinkohal kasutatakse ka sidekriipsusid.

const title = document.querySelector("h1");
title.style.setProperty("--main-color", "red");
title.style.setProperty("--font-size", "50px");

const title = document.querySelector("h1");

title.style.setProperty("--main-color", "red");

title.style.setProperty("--font-size", "50px");

Klasside lisamine ja eemaldamine

Teine võimalus kujundust muuta hõlmab klassi väärtuste lisamist või eemaldamist elemendilt, mis omakorda võib kaasa tuua teatud stiilireeglite rakendamise või ignoreerimise. Klassi väärtused võivad olla eelnevalt defineeritud CSS-i reeglid, mis muudavad elemendi välimust vastavalt sellele, millised klassid on sellele omistatud. Kasutame töötamiseks Bootstrapis lisatud alert-kasti

<div class="alert" role="alert">
A simple warning alert—check it out!
</div>

A simple warning alert—check it out!

</div>

Selleks, et näha, millised klassid elemendil on, kasutame classList omadust:

const element = document.querySelector('.alert');
const classes = element.classList;
console.log(classes);

const element = document.querySelector('.alert');

const classes = element.classList;

console.log(classes);

Uue klassi lisamiseks kasuta classList.add() meetodit

const element = document.querySelector('.alert');
element.classList.add('alert-warning');

const element = document.querySelector('.alert');

element.classList.add('alert-warning');

Nüüd peaks kast kenasti kollane olema:

Kui soovid elemendist vabaneda, siis kasuta classList.remove() meetodit

const element = document.querySelector('.alert');
element.classList.remove('alert');

const element = document.querySelector('.alert');

element.classList.remove('alert');

See peaks nüüd selle kasti vormindamise jälle katki tegema.

Olemasoleva klassi nime muutmiseks kasuta classList.replace("vanaKlass", "uusKlass") meetodit.

let divElement = document.querySelector(".alert");
divElement.classList.replace("alert-warning", "alert-danger");

let divElement = document.querySelector(".alert");

divElement.classList.replace("alert-warning", "alert-danger");

Mõnikord on vaja klassi nime lisada ja eemaldada (toggle), näiteks menüü aktiivsuse määramisel jne. Selleks kasutame classList.toggle() meetodit, mis tähendab, et kui seda klassi pole elemendil, siis see lisatakse, ja kui on juba olemas, siis eemaldatakse.

const element = document.querySelector('.alert');
element.classList.toggle('alert-warning');

const element = document.querySelector('.alert');

element.classList.toggle('alert-warning');

Ülesanne 14

Lisa järgnev kood oma HTML dokumenti

        <div class="container">
            <ul class="list-group">
                <li class="list-group-item">Ootel: Lorem ipsum dolor sit amet</li>
                <li class="list-group-item">Tehtud: Lorem ipsum dolor sit amet</li>
                <li class="list-group-item">Viga: Lorem ipsum dolor sit amet</li>
                <li class="list-group-item">Tehtud: Lorem ipsum dolor sit amet</li>
                <li class="list-group-item">Tehtud: Lorem ipsum dolor sit amet</li>
                <li class="list-group-item">Lorem ipsum dolor sit amet</li>
                <li class="list-group-item">Viga: Lorem ipsum dolor sit amet</li>
              </ul>
        </div>

<li class="list-group-item">Ootel: Lorem ipsum dolor sit amet</li>

<li class="list-group-item">Tehtud: Lorem ipsum dolor sit amet</li>

<li class="list-group-item">Viga: Lorem ipsum dolor sit amet</li>

<li class="list-group-item">Tehtud: Lorem ipsum dolor sit amet</li>

<li class="list-group-item">Lorem ipsum dolor sit amet</li>

<li class="list-group-item">Viga: Lorem ipsum dolor sit amet</li>

</ul>

</div>

Kasuta Javascripti, mis tuvastab, et kui tekstis on vastav sõna, siis määratakse sellele vastav klass:

ootel – list-group-item-warning
tehtud – list-group-item-success
viga – list-group-item-danger

Täienda koodi nii, et list-group-item-success lisatakse css omadus font-weight: 700

Office 365

LibreOffice

Algajad

Edasijõudnud

WordPress

Audio

Video

Muu

Javascript ja CSS (Ülesanne 14)

CSS stiilide muutmine

CSS muutujate muutmine

Klasside lisamine ja eemaldamine

Ülesanne 14

Kategooriad

Viimased postitused

Windows käsurida

Git versioonihaldus

Steinberg UR22 mk2 helikaart

metshein.com: parim eestikeelne koolitusportaal

Kontrolli tunnistust