HTML DOM ফুলস্ক্রিন এলিমেন্ট সম্পত্তি

HTML DOM fullscreenElement প্রপার্টিটি বর্তমানে পূর্ণ স্ক্রীন মোডে প্রদর্শিত উপাদানটি ফেরানোর জন্য ব্যবহৃত হয়। প্রদত্ত উপাদানটি পূর্ণস্ক্রীনে না থাকলে এটি শূন্য হয়ে যাবে।

সিনট্যাক্স

ফুলস্ক্রিন এলিমেন্ট প্রপার্টির জন্য সিনট্যাক্স নিচে দেওয়া হল −

document.fullscreenElement

আসুন আমরা ফুলস্ক্রিন এলিমেন্ট প্রপার্টি -

এর একটি উদাহরণ দেখি

দ্রষ্টব্য − এই উদাহরণে Chrome, Safari এবং Opera-এর জন্য শুধুমাত্র স্ট্যান্ডার্ড সিনট্যাক্স এবং ব্রাউজার উপসর্গ রয়েছে। আপনার ব্রাউজার উপসর্গের জন্য, শেষ বিভাগটি পরীক্ষা করুন।

উদাহরণ

আসুন একটি উদাহরণ দেখি -

<!DOCTYPE html>
<html>
<head>
<script>
   function FullscreenEle() {
      console.log(document.fullscreenElement || /*Standard Syntax*/
      document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
   }
   setTimeout(FullscreenEle, 8000);
   function EnableFullScreen() {
      var elem = document.getElementById("image");
      if (elem.requestFullscreen) /*Standard Syntax*/
         elem.requestFullscreen();
      else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
         elem.webkitRequestFullscreen();
      else
         console.log('You cannot go fullscreen currently')
   }
</script>
</head>
<body>
<h1>Learn Blockchain</h1>
<img id="image" src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">
<br>
<button onclick="EnableFullScreen()">Go fullscreen</button>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM ফুলস্ক্রিন এলিমেন্ট সম্পত্তি

"Go fullscreen" -

-এ ক্লিক করলে

HTML DOM ফুলস্ক্রিন এলিমেন্ট সম্পত্তি

উপরের উদাহরণে -

আমরা প্রথমে আইডি "ইমেজ" সহ একটি উপাদান তৈরি করেছি এবং src অ্যাট্রিবিউট মান হিসাবে একটি চিত্র লিঙ্ক তৈরি করেছি -

<img id="image" data-fr-src="https://www.tutorialspoint.com/blockchain/images/blockchain.jpg">

তারপরে আমরা একটি "গো ফুলস্ক্রিন" বোতাম তৈরি করেছি যা ব্যবহারকারী দ্বারা ক্লিক করলে EnableFullScreen() পদ্ধতিটি কার্যকর করবে -

<button onclick="EnableFullScreen()">Go fullscreen</button>

EnableFullScreen() পদ্ধতি ডকুমেন্ট অবজেক্ট getElementById() পদ্ধতি ব্যবহার করে img উপাদান পায় এবং এটি পরিবর্তনশীল এলিমে বরাদ্দ করে। RequestFullScreen প্রপার্টি ব্যবহার করে, আমরা পরীক্ষা করি যে উপাদানটি পূর্ণস্ক্রীন মোডে খোলা যায় নাকি img এলিমেন্টে requestFullScreen প্রপার্টি ব্যবহার করে না।

যদি সেই উপাদানটি ফুলস্ক্রিনে খোলা যায় তবে আমরা সেই উপাদানটিকে ফুলস্ক্রিন মোডে পেতে requestFullScreen() পদ্ধতি ব্যবহার করি। যদি উপাদানটি পূর্ণস্ক্রীন মোডে প্রদর্শন করা না যায় তবে আমরা console.log() পদ্ধতি ব্যবহার করে কনসোলে কিছু বার্তা প্রদর্শন করি৷

function EnableFullScreen() {
   var elem = document.getElementById("image");
   if (elem.requestFullscreen) /*Standard Syntax*/
      elem.requestFullscreen();
   else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
      elem.webkitRequestFullscreen();
   else
      console.log('You cannot go fullscreen currently')
}

যেহেতু আমরা উপাদানটি পূর্ণস্ক্রীনে যাওয়ার পরে কোনো কিছুতে ক্লিক করতে পারি না, তাই আমরা সেটটাইমআউট(fullscreenEle,8000) পদ্ধতি ব্যবহার করি যে এটি 8000ms (8s) -

এর পরে fullscreenEle() পদ্ধতিটি কার্যকর করবে।

setTimeout(FullscreenEle, 8000);

FullscreenEle() ফাংশন সেই উপাদানটি ফেরত দেয় যা বর্তমানে ফুলস্ক্রিন মোডে রয়েছে এবং console.log() পদ্ধতি ব্যবহার করে আমরা উপাদানটিকে কনসোল ট্যাবে প্রদর্শন করি -

function FullscreenEle() {
   console.log(document.fullscreenElement|| /*Standard Syntax*/
   document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}

এর জন্য

দ্রষ্টব্য - আপনার অভিপ্রেত ব্রাউজারের জন্য কাজ করার জন্য আপনাকে এই উদাহরণের জন্য নির্দিষ্ট উপসর্গ ব্যবহার করতে হবে। উপরের উদাহরণে আমরা Chrome, Opera এবং Safari ব্রাউজারের জন্য শুধুমাত্র স্ট্যান্ডার্ড সিনট্যাক্স এবং ব্রাউজার প্রিফিক্স লিখেছি। নীচে আপনার ব্রাউজারগুলির জন্য কিছু উপসর্গ রয়েছে৷

৷

অনুরোধের জন্য ফুলস্ক্রিন
- Firefox:mozRequestFullScreen
- IE/Edge:msRequestFullscreen
ফুলস্ক্রিন এলিমেন্টের জন্য
- Firefox:mozFullScreenElement
- IE/Edge:msRequestFullscreen