वेनिला JavaScript से माउस को इसके ऊपर ले जाने पर वेबसाइट पर बैकग्राउंड कलर बदलना सीखें।
HTML
एक साधारण 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"
})अब जैसे ही यूजर आपकी वेबसाइट के किसी भी हिस्से पर अपना माउस ले जाता है, बैकग्राउंड कलर तुरंत लाल हो जाता है।
कोड डेमो देखें।
कलर वैल्यूज़ के लिए आप या तो वास्तविक नामों (जैसे "red"), हेक्स या rgba वैल्यूज़ का उपयोग कर सकते हैं।
