5.1 document.getElementById()
तुम्हाला माहिती आहे की, JavaScript HTML पृष्ठांवर काही अॅनिमेशन जोडण्यासाठी तयार करण्यात आले होते. आतापर्यंत, आम्ही याबद्दल जास्त बोललो नाही. हेच अॅनिमेशन कसे जोडायचे? उदाहरणार्थ, घटकाचा रंग कसा बदलायचा?
घटकाचा रंग बदलण्यासाठी, आपल्याला प्रथम हा घटक शोधण्याची आवश्यकता आहे. हे करण्यासाठी, एक फंक्शन आहे जे तुम्ही तुमच्या HTML मध्ये इच्छित घटकावर document.getElementById();लिहा आणि नंतर JavaScript वरून त्यात प्रवेश करा. idउदाहरण:
<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()
घटक मिळवण्याव्यतिरिक्त, आम्ही नवीन घटक देखील तयार करू शकतो आणि विद्यमान हटवू शकतो.
घटक तयार करणे खूप सोपे आहे. हे करण्यासाठी, तुम्हाला दोन गोष्टी करण्याची आवश्यकता आहे: अ) एक घटक तयार करा , ब) तो दस्तऐवजात योग्य ठिकाणी जोडा . हे सहसा असे दिसते:
<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(). त्यासह, आपण ब्राउझरला वर्तमान पृष्ठाऐवजी नवीन पृष्ठ लोड करण्यास भाग पाडू शकता. URLफक्त या पद्धतीत पास करा आणि कॉल करा. उदाहरण:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>वरील उदाहरणामध्ये, वापरकर्त्याने इमेजवर क्लिक केल्यानंतर, google.com हे पृष्ठ वर्तमान टॅबमध्ये लोड केले जाईल.
5.4 वर्तमान URL
आणि आणखी एक उपयुक्त गोष्ट. कधीकधी स्क्रिप्टला वर्तमान पृष्ठ URL माहित असणे आवश्यक आहे. उदाहरणार्थ, समान स्क्रिप्ट वेगवेगळ्या पृष्ठांवर जोडली जाऊ शकते. ते कसे करायचे?
यासाठी एक विशेष मालमत्ता आहे.document.location.href
var currentURL = document.location.href;