5.1 document.getElementById()
Som ni vet skapades JavaScript för att lÀgga till lite animation pÄ HTML-sidor. Hittills har vi inte sagt sÄ mycket om det. Hur lÀgger man till samma animation? Hur Àndrar man till exempel fÀrgen pÄ ett element?
För att Àndra fÀrgen pÄ ett element mÄste du först hitta detta element. För att göra detta finns en funktion document.getElementById();Du skriver i din HTML idvid önskat element, och kommer sedan Ät det frÄn JavaScript. Exempel:
<head>
<script>
function changeImage()
{
var image = document.getElementById("image123");
image.src = "new-image.png";
}
</script>
</head>
<body>
<img id="image123" scr="big-image.png" onclick="changeImage()">
</body>
Efter att anvÀndaren klickat pÄ bilden kallas funktionen changeImge(). Inuti det fÄr vi elementet imageav dess ID, och Àndrar sedan vÀrdet pÄ dess src-attribut till ett nytt. Vilket gör att elementet imgladdar en ny bild.
5.2 document.createElement()
Förutom att fÄ ett element kan vi Àven skapa nya element och ta bort befintliga.
Att skapa element Àr vÀldigt enkelt. För att göra detta mÄste du göra tvÄ saker: a) skapa ett element , b) lÀgga till det pÄ rÀtt plats i dokumentet. Det brukar se ut sÄ hÀr:
<head>
<script>
window.onload = function () {
var image = document.createElement("IMG");
var image.src = "big-image.png";
document.body.addAfter(image);
}
</script>
</head>
<body>
</body>
5.3 metoden window.navigate().
En annan mycket anvÀndbar metod Àr window.navigate(). Med den kan du tvinga webblÀsaren att ladda en ny sida istÀllet för den nuvarande. Skicka det bara URLtill den hÀr metoden och ring det. Exempel:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
I exemplet ovan, efter att anvÀndaren klickar pÄ bilden, kommer sidan google.com att laddas till den aktuella fliken.
5.4 Aktuell URL
Och en till nyttig sak. Ibland behöver ett skript kÀnna till den aktuella sidans URL. Till exempel kan samma skript lÀggas till pÄ olika sidor. Hur man gör det?
Det finns en speciell fastighet för detta.document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION