Modyfikowanie stylu elementu

Lekcja 4 z 13 w kursie Metody DOM w JavaScript w Coddy.

Następna właściwość, której się nauczymy, to style, która odpowiada za zmianę istniejącego stylu. Możesz zmienić styl w ten sposób:

const element = document.getElementById("elementID");
element.style.color = "green";

Po wykonaniu tego kodu kolor #elementID zostanie zmieniony na green.

Wyzwanie

Łatwy

Otrzymujesz kod HTML zawierający element div z identyfikatorem.

Używając wyłącznie JavaScript, zmień kolor tła tego elementu div na czerwony:

Pobierz element za pomocą funkcji getElementById.
Zmień styl koloru tła elementu za pomocą właściwości style.backgroundColor.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
    <body>
        <div id="box" style="width: 100px; height: 100px;">Content</div>
        <script src="script.js"></script>
    </body>
</html>

Wszystkie lekcje w sekcji Metody DOM w JavaScript

1Wprowadzenie

Wprowadzenie Model obiektowy dokumentu

2Metody DOM I

getElementByIdModyfikowanie stylu elementugetElementsByClassName Iterowanie i manipulowanie getElementsByTagName querySelector

3Metody DOM II

querySelectorAll addEventListener innerHTML createElement i appendChild Przełączanie classList

Poćwicz samodzielnie: Edytor online Web