जब आप किसी वेबसाइट पर अपना माउस घुमाते हैं, तो वेनिला जावास्क्रिप्ट के साथ पृष्ठभूमि का रंग बदलने का तरीका जानें।
एचटीएमएल
यहाँ एक साधारण HTML पृष्ठ के लिए कुछ मार्कअप है:
<!DOCTYPE html>
<html>
<body>
<h1>Move your move over this page</h1>
</body>
</html>JavaScript
जब कोई उपयोगकर्ता अपने माउस को पृष्ठ के किसी भी भाग पर ले जाता है तो पृष्ठभूमि का रंग बदलने के लिए, आपको यह करना होगा:
<body>को लक्षित करें तत्व और इसके संदर्भ को एक चर में संग्रहीत करें।windowपर एक ईवेंट श्रोता ऑब्जेक्ट जोmouseover. के लिए सुनता है इवेंट.backgroundColorलागू करें एक रंग मूल्य के साथ संपत्ति।
अपनी JavaScript फ़ाइल में निम्न कोड जोड़ें:
const bodyElement = document.querySelector("body")
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "red"
})अब जैसे ही उपयोगकर्ता अपनी वेबसाइट के किसी भी हिस्से पर अपना माउस घुमाता है, पृष्ठभूमि का रंग तुरंत लाल हो जाता है।
कोड डेमो देखें।
रंग मानों के लिए आप या तो वास्तविक नामों का उपयोग कर सकते हैं (जैसे "लाल"), हेक्स या आरजीबीए मान।