JavaScript HTML DOM zmiany CSS
HTML DOM pozwala JavaScript, żeby zmienić styl elementów HTML.
Zmień styl HTML
Aby zmienić styl elementu HTML, należy użyć następującej składni:
document.getElementById(id).style.property=新样式
Poniższy przykład zmienić styl elementu <p>:
Przykłady
<! DOCTYPE html>
<Html>
<Head>
<meta charset = "utf-8">
<Title> Ten poradnik (w3big.com) </ title>
</ Head>
<Body>
<P id = "p1"> Hello World ! </ p>
<P id = "p2"> Hello World ! </ p>
<Script> document.getElementById ( "P2" ) style.color = "blue" ;. document.getElementById ( "P2") style.fontFamily = "Arial"; .. document.getElementById ( "P2") style.fontSize = "większy"; </ script>
<P> skrypt modyfikując powyższe akapity. </ P>
</ Body>
</ Html>
Spróbuj »
wykorzystanie zdarzeń
HTML DOM pozwala nam na wykonanie kodu poprzez wyzwalanie zdarzeń.
Na przykład, następujące zdarzenia:
- Element zostanie kliknięty.
- Obciążenia strony.
- Skrzynka wejściowa jest modyfikowany.
- ......
W następnych rozdziałach dowiesz się więcej na temat wiedzy o wydarzeniu.
Ten przykład zmienia id style = "ID1" elementu HTML, gdy użytkownik kliknie przycisk:
Przykłady
<! DOCTYPE html>
<Html>
<Body>
<H1 id = "ID1"> Moja pozycja 1 </ h1>
<Button type = "button"
onclick = "document.getElementById (" ID1 "). style.color = 'red'">
Skieruj mnie! </ Button>
</ Body>
</ Html>
<Html>
<Body>
<H1 id = "ID1"> Moja pozycja 1 </ h1>
<Button type = "button"
onclick = "document.getElementById (" ID1 "). style.color = 'red'">
Skieruj mnie! </ Button>
</ Body>
</ Html>
Spróbuj »
Więcej przykładów
widoczność
Jak zrobić elementem niewidoczne. Element chcesz pokazać lub zniknąć?