JavaScript & DOM - Styling (Stil)


Stilizovanje DOM elemenata u JavaScript-u

Takođe možete primijeniti stil na HTML elemente za dinamičku promjenu vizualne prezentacije HTML dokumenata pomoću JavaScript-a. Možete postaviti gotovo sve stilove za elemente poput fontova, boja, margina, obruba, pozadinskih slika, poravnanja teksta, širine i visine, položaja itd. U sljedećem dijelu razmotrićemo različite metode postavljanja stilova u JavaScript-u.



Postavljanje ugrađenih stilova na elementima

Ugrađeni stilovi se primjenjuju direktno na određeni HTML element pomoću atributa style. U JavaScript svojstvo style koristi se za dobijanje ili postavljanje ugrađenog stila elementa. Sljedeći primjer će postaviti svojstva boje i fonta elementa s id = "intro".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Postavite ugrađenih stilova Demo</title>
</head>
<body>
    <p id="intro">Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
        
    <script>
    // Odabir elementa
    var elem = document.getElementById("intro");
    
    // Primjena stilova na element
    elem.style.color = "blue";
    elem.style.fontSize = "18px";
    elem.style.fontWeight = "bold";
    </script>
</body>
</html>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje ugrađenog stila elementu</title>
</head>
<body>
    <p id="intro">Ovo je paagraf.</p>
    <p>Ovo je drugi paragraf.</p>
    <button type="button" onclick="setStyle()">Postavite uvodne stilove pasusa</button>
      
    <script>
    function setStyle() {
        // Odabir elementa
        var elem = document.getElementById("intro");
         
        // Primjena stilova na element
        elem.style.color = "blue";
        elem.style.fontSize = "18px";
        elem.style.fontWeight = "bold";
    }
    </script>
</body>
</html>


Konvencije o imenovanju CSS svojstava u JavaScript-u

Mnoga CSS svojstva, poput veličine fonta, pozadinske slike, dekoracije teksta itd., sadrže crtice (-) u svojim imenima. Budući da je u JavaScript crtica rezervirani operator i tumači se kao znak minusa, nije moguće napisati izraz, poput: elem.style.font-size

Zbog toga se u JavaScript-u imena CSS svojstava koja sadrže jednu ili više crtica i pretvaraju ih u interkapitaliziranu riječ stila. To se radi uklanjanjem crtica i pisanjem velikih slova neposredno nakon svake crtice, tako da CSS svojstvo font-size postaje DOM svojstvo fontSize, border-left-style postaje borderLeftStyle, i tako dalje.



Dobijanje informacija o stilu od elementa

Slično tome, stilove primijenjene na HTML elemente dobijate pomoću svojstva style. Sljedeći primjer dobiće informacije o stilu iz elementa koji ima id = "intro".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Nabavljanje elementa demo prikaza</title>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
        
    <script>
    // Odabir elementa
    var elem = document.getElementById("intro");
     
    // Dobijanje informacija o stilu iz elementa
    alert(elem.style.color);  // Ispisuje: red
    alert(elem.style.fontSize);  // Ispisuje: 20px
    alert(elem.style.fontStyle);  // Ne ispisuje ništa
    </script>
</body>
</html>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dohvatanje informacije o stilu od elementa</title>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
        
    <script>
    // Odabir elemenata
    var elem = document.getElementById("intro");
     
    // Dobijanje informacija o stilu iz elementa
    document.write(elem.style.color + "<br>");  // Ispisuje: red
    document.write(elem.style.fontSize + "<br>");  // Ispisuje: 20px
    document.write(elem.style.fontStyle);  // Ne ispisuje ništa
    </script>
</body>
</html>

Svojstvo style nije vrlo korisno kada je riječ o dobijanju informacija o stilu iz elemenata, jer vraća samo pravila stila postavljena u atributu stila elementa, a ne ona koja dolaze s drugog mjesta, poput pravila stila u ugrađenim stilskim tabelama ili vanjskim stilskim listama. Da biste dobili vrijednosti svih CSS svojstava koja se zapravo koriste za generisanje elementa, možete koristiti metodu window.getComputedStyle(), kao što je prikazano u sljedećem primjeru:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS  Dobijanje izračunatih informacija stila DEMO</title>
<style type="text/css">
    #intro {        
        font-weight: bold;
        font-style: italic;
    }
</style>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
        
    <script>
    // Odabir elemenata
    var elem = document.getElementById("intro");
     
    // Dobijanje izračunatih informacija o stilu
    var styles = window.getComputedStyle(elem);
     
    alert(styles.getPropertyValue("color"));  // Ispisuje: rgb(255, 0, 0)    
    alert(styles.getPropertyValue("font-size"));  // Ispisuje: 20px
    alert(styles.getPropertyValue("font-weight"));  // Ispisuje: 700
    alert(styles.getPropertyValue("font-style"));  // Ispisuje: italic
    </script>
</body>
</html>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Dobijanje izračunatih informacija o stilu od elementa</title>
<style type="text/css">
    #intro {        
        font-weight: bold;
        font-style: italic;
    }
</style>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
        
    <script>
    // Odabir elemenata
    var elem = document.getElementById("intro");
     
    // Dobijanje izračunatih informacija o stilu
    var styles = window.getComputedStyle(elem);
     
    document.write(styles.getPropertyValue("color") + "<br>");  // Ispisuje: rgb(255, 0, 0)    
    document.write(styles.getPropertyValue("font-size") + "<br>");  // Ispisuje: 20px
    document.write(styles.getPropertyValue("font-weight") + "<br>");  // Ispisuje: 700
    document.write(styles.getPropertyValue("font-style"));  // Ispisuje: italic
    </script>
</body>
</html>


Dodavanje CSS klasa (class) elementima

Takođe možete dobiti ili postaviti CSS klase na HTML elemente pomoću svojstva className. Klasa (class) je rezervisana riječ u JavaScript-u, tako da JavaScript koristi svojstvo className za upućivanje na vrijednost atributa HTML klase. Sljedeći primjer će pokazati kako dodati novu klasu ili zamijeniti sve postojeće klase u element <div> koji ima id = "info".

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Dodajte ili zamijenite CSS klasu DEMO</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Nešto veoma VAŽNO!!!</div>
        
    <script>
    // Odabir elementa
    var elem = document.getElementById("info");
    
    elem.className = "note";  // Dodajte ili zamijenite sve klase (class) sa note class
    elem.className += " highlight";  // Dodavanje nove istaknute klase (class)
    </script>
</body>
</html>

Postoji još bolji način rada sa CSS klasama (class). Svojstvo classList možete koristiti za lako dobijanje, postavljanje ili uklanjanje CSS klasa (class) iz elementa. Ovo svojstvo je podržano u svim glavnim pretraživačima, osim u Internet Exploreru prije verzije 10. Evo primjera:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS classList Demo</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Nešto veoma VAŽNO!!!</div>
    
    <script>
    // Odabir elementa
    var elem = document.getElementById("info");
     
    elem.classList.add("hide");  // Dodavanje nove klase
    elem.classList.add("note", "highlight");  // Dodavanje više klasa
    elem.classList.remove("hide"); // Uklanjanje klase
    elem.classList.remove("disabled", "note"); // Uklanjanje više klasa
    elem.classList.toggle("visible"); // Ako klasa postoji, uklonite je, ako ne dodajte je
     
    // Utvrđivanje postojanja klase
    if(elem.classList.contains("highlight")) {
        alert("Navedena klasa postoji na elementu.");
    }
    </script>
</body>
</html>