কম্পিউটার

এইচটিএমএল ডম মাউস ইভেন্ট স্ক্রিনএক্স বৈশিষ্ট্য


HTML DOM MouseEvent screenX প্রপার্টি মাউস পয়েন্টারের অনুভূমিক (x) স্থানাঙ্ক প্রদান করে যদি মাউস ইভেন্টটি ট্রিগার করা হয় তবে ব্যবহারকারীদের স্ক্রীন ডিসপ্লের সাথে সম্পর্কিত। পাশাপাশি উল্লম্ব স্থানাঙ্ক পেতে screenY এর সাথে ব্যবহার করুন।

নিম্নলিখিত সিনট্যাক্স −

screenX অবজেক্টের রেফারেন্স ফিরিয়ে দেওয়া হচ্ছে

MouseEventObject.screenX

আসুনMouseEvent screenX এর একটি উদাহরণ দেখি সম্পত্তি -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent screenX</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   #outer {
      width:70%;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      border:1px solid black;
      height: 105px;
      background-color: #28a745;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   #upper {
      border-bottom: 1px solid black;
      height: 40px;
      margin: 0 0 15px 0;
      background-color: #DC3545;
   }
   #lower {
      border-top: 1px solid black;
      height: 40px;
      margin: 15px 0 0 0;
      background-color: #DC3545;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>MouseEvent-screenX</legend>
         <div id="outer">
         <div id="upper"><h2>Danger</h2></div>
         <div id="lower"><h2>Danger</h2></div>
         </div>
         <input type="button" id="start" value="Start" onclick="gameStart()">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById('divDisplay');
   var gameDisplay = document.getElementById('outer');
   function playGame(event) {
      var x = event.screenX;
      var y = event.screenY;
         if(y > 330 && y < 345){
            divDisplay.textContent = 'Keep Going!';
               if(x === 1171){
                  divDisplay.textContent = 'Congrats! You Did it!';
                  gameDisplay.removeEventListener('mousemove', playGame);
               }
         }
         else{
            divDisplay.textContent = 'You moved to DANGER area. You loose!';
            gameDisplay.removeEventListener('mousemove', playGame);
         }
   }
   function gameStart(){
      gameDisplay.addEventListener('mousemove',playGame);
   }
</script>
</body>
</html>

আউটপুট

'স্টার্ট' ক্লিক করার পর সবুজ (নিরাপদ) এলাকায় বোতাম এবং কার্সার -

এইচটিএমএল ডম মাউস ইভেন্ট স্ক্রিনএক্স বৈশিষ্ট্য

'স্টার্ট' ক্লিক করার পর সবুজ (নিরাপদ) এলাকার শেষে বোতাম এবং কার্সার −

এইচটিএমএল ডম মাউস ইভেন্ট স্ক্রিনএক্স বৈশিষ্ট্য

'স্টার্ট' ক্লিক করার পর লাল (বিপদ) এলাকায় বোতাম এবং কার্সার −

এইচটিএমএল ডম মাউস ইভেন্ট স্ক্রিনএক্স বৈশিষ্ট্য


  1. HTML DOM মাউস ইভেন্ট পেজএক্স প্রপার্টি

  2. HTML DOM মাউস ইভেন্ট অফসেটওয়াই প্রপার্টি

  3. HTML DOM মাউস ইভেন্ট অফসেটএক্স প্রপার্টি

  4. HTML DOM মাউস ইভেন্ট ক্লায়েন্টওয়াই সম্পত্তি