5.1 document.getElementById()
Както знаете, JavaScript е създаден, за да добави малко анимация към HTML страници. Досега не сме казали много за това. Как да добавя същата тази анимация? Как например да промените цвета на елемент?
За да промените цвета на даден елемент, първо трябва да намерите този елемент. За да направите това, има функция document.getElementById();
, която пишете във вашия HTML id
в желания елемент и след това го осъществявате от JavaScript. Пример:
<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>
След като потребителят щракне върху изображението, функцията се извиква changeImge()
. Вътре в него получаваме елемента image
чрез неговия ID
и след това променяме стойността на неговия src атрибут на нов. Което ще накара елемента img
да зареди ново изображение.
5.2 document.createElement()
В допълнение към получаването на елемент, можем също да създаваме нови елементи и да изтриваме съществуващи.
Създаването на елементи е много лесно. За да направите това, трябва да направите две неща: а) да създадете елемент , б) да го добавите на правилното място в documentа. Обикновено изглежда така:
<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 метод window.navigate().
Друг много полезен метод е window.navigate()
. С него можете да принудите браузъра да зареди нова page instead of текущата. Просто го предайте URL
на този метод и го извикайте. Пример:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
В примера по-горе, след като потребителят кликне върху изображението, pageта google.com ще бъде заредена в текущия раздел.
5.4 Текущ URL
И още нещо полезно. Понякога скриптът трябва да знае текущия URL address на pageта. Например един и същ скрипт може да се добавя към различни страници. Как да го направим?
За това има специално свойство.document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION