Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

HTML ऑनटॉगल इवेंट विशेषता

<घंटा/>

जब कोई उपयोगकर्ता किसी HTML दस्तावेज़ में <विवरण> HTML तत्व को खोलता या बंद करता है, तो HTML ऑनटॉगल ईवेंट विशेषता ट्रिगर हो जाती है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

<details ontoggle=”script”>Content</details>

आइए हम HTML ऑनटॉगल इवेंट एट्रीब्यूट का एक उदाहरण देखें -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
   }
</style>
</head>
<body>
<h1>HTML ontoggle Event Attribute Demo</h1>
<details ontoggle="toggleFn()">
<summary>Hi! I'm summary element</summary>
<p>This is a paragraph with some dummy content.</p>
</details>
<script>
   function toggleFn() {
      document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
      document.body.style.color = "#fff";
   }
</script>
</body>
</html>

आउटपुट

HTML ऑनटॉगल इवेंट विशेषता

अब यह देखने के लिए विवरण HTML तत्व खोलने का प्रयास करें कि ontggle ईवेंट विशेषता कैसे काम करती है।

HTML ऑनटॉगल इवेंट विशेषता


  1. HTML ondragenter ईवेंट विशेषता

    HTML ondragenter ईवेंट विशेषता तब ट्रिगर होती है जब कोई ड्रैग करने योग्य तत्व या टेक्स्ट HTML दस्तावेज़ में एक मान्य ड्रॉप लक्ष्य में प्रवेश करता है। सिंटैक्स निम्नलिखित वाक्य रचना है - <tagname ondragenter=”script”></tagname> उदाहरण आइए हम HTML ondragenter ईवेंट विशेषता का

  1. HTML ondragend ईवेंट विशेषता

    HTML ondragend ईवेंट विशेषता तब ट्रिगर होती है जब उपयोगकर्ता HTML दस्तावेज़ में किसी HTML तत्व के किसी तत्व या टेक्स्ट को खींचना समाप्त कर देता है। सिंटैक्स निम्नलिखित वाक्य रचना है - <tagname ondragend=”script”></tagname> आइए हम HTML ondragend ईवेंट विशेषता का एक उदाहरण दे

  1. एचटीएमएल ऑनपेजशो इवेंट एट्रीब्यूट

    जब कोई उपयोगकर्ता वेबपेज पर जाता है तो HTML onpageshow ईवेंट विशेषता ट्रिगर हो जाती है। सिंटैक्स निम्नलिखित वाक्य रचना है - <body onpageshow=”script”></body> आइए एचटीएमएल ऑनपेजशो इवेंट एट्रीब्यूट— . का एक उदाहरण देखें उदाहरण <!DOCTYPE html> <html> <style>