HTML DOM Html Elementide Muutmine
HTML elemente muudetakse JavaScript'i, HTML DOM ja sündmuste abil.
HTML Elemendi Muutmine
HTML DOM ja JavaScript võimaldavad muuta Html elemente dünaamiliselt, lisades neid otse elemendi sisusse v. atributidesse.
Allpool olevas näites muudame tausta värvi <body> elemendis:
<html>
<body>
<script type="text/javascript">
document.body.bgColor="yellow";
</script>
</body>
</html>
Proovi ise:
HTML Teksti Elemendi Muutmine - innerHTML
Lihtsaim moodus elemendi sisu muutmiseks on innerHTML omaduse kasutamine.
Allpool olevas näites muudame teksti <p> elemendi sees:
<html>
<body>
<p id="p1">Tere Jälle!</p>
<script type="text/javascript">
document.getElementById("p1").innerHTML="See on uus tekst!";
</script>
</body>
</html>
Proovi ise:
HTML Elemendi Muutmine Kasutades Sündmust
Sündmused genereeritakse brauseri poolt. Kasutaja saab need käivitada klikkides vastavale elemendile.
Allpool olevas näites muudame tausta värvi <body> elemendis kui klikime nupule:
<html>
<body>
<input type="button"
onclick="document.body.bgColor='green';"
value="Nupule klikkides muudame tausta värvi">
</body>
</html>
Proovi ise:
Funktsiooni Loomine Elemendi Teksti Muutmiseks
Allpool olevas näites kasutame funktsiooni muutmaks teksti <p> elemendis. Selleks peab kasutaja klikkima vastavale nupule:
<html>
<head>
<script type="text/javascript">
function ChangeText()
{
document.getElementById("p1").innerHTML="See on uus tekst!";
}
</script>
</head>
<body>
<p id="p1">Tere Jälle!</p>
<input type="button" onclick="ChangeText()"
value="Teksti muutmiseks kliki siia">
</body>
</html>
Proovi ise:
Teksti Kuju Värvi ja Tausta Muutmine
Allpool olevas näites kasutame funktsiooni selleks, et muuta <p> elemendi stiili. Kasutaja peab funktsiooni käivitamiseks klikkima vastavale nupule.
<html>
<head>
<script type="text/javascript">
function ChangeText()
{
document.getElementById("p1").style.color="red";
document.getElementById("p1").style.backgroundColor="blue";
document.getElementById("p1").style.fontFamily="Arial";
}
</script>
</head>
<body>
<p id="p1">Tere Jälle!</p>
<input type="button" onclick="ChangeText()"
value="Teksti muutmiseks kliki siia">
</body>
</html>
