JavaScript & DOM - Styling (Stil)


Stilizovanje DOM elemenata u JavaScript

Takođe možete primijeniti stil na HTML elemente za dinamičku promjenu vizualne prezentacije HTML dokumenata pomoću JavaScript. 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.



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 rezervisani operator i tumači se kao znak minusa, nije moguće napisati izraz, poput: elem.style.font-size. Zbog toga se u JavaScript imena CSS svojstava koja sadrže jednu ili više crtica pretvaraju u interkapitaliziranu stila. To se radi uklanjanjem crtica i pisanjem velikih slova neposredno nakon svake crtice, tako da CSS svojstvo font-size postaje u DOM svojstvu 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, 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. Pogledajmo primjer:

<!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>