home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ HTML DOM fullscreenElement

คุณสมบัติ HTML DOM fullscreenElement ใช้สำหรับส่งคืนองค์ประกอบที่แสดงในโหมดเต็มหน้าจอในปัจจุบัน มันจะคืนค่า null หากองค์ประกอบที่กำหนดไม่เต็มหน้าจอ

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติ fullscreenElement -

document.fullscreenElement

ให้เราดูตัวอย่างของคุณสมบัติ 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 fullscreenElement

เมื่อคลิกที่ "เต็มหน้าจอ" −

คุณสมบัติ HTML DOM fullscreenElement

ในตัวอย่างข้างต้น −

ขั้นแรกเราได้สร้างองค์ประกอบที่มีรหัส "รูปภาพ" และลิงก์รูปภาพเป็นค่าแอตทริบิวต์ src -

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

จากนั้นเราได้สร้างปุ่ม "เต็มหน้าจอ" ที่จะรันเมธอด EnableFullScreen() เมื่อผู้ใช้คลิก -

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

EnableFullScreen() วิธีการรับองค์ประกอบ img โดยใช้วัตถุเอกสารเมธอด getElementById() และกำหนดให้กับองค์ประกอบตัวแปร เมื่อใช้คุณสมบัติ requestFullScreen เราจะตรวจสอบว่าองค์ประกอบสามารถเปิดในโหมดเต็มหน้าจอได้หรือไม่โดยใช้คุณสมบัติ requestFullScreen ในองค์ประกอบ img

หากองค์ประกอบนั้นสามารถเปิดได้แบบเต็มหน้าจอ เราจะใช้เมธอด 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')
}

เนื่องจากเราไม่สามารถคลิกอะไรก็ได้หลังจากที่องค์ประกอบทำงานเต็มหน้าจอ เราจึงใช้เมธอด setTimeout(fullscreenEle,8000) เพื่อระบุว่าควรรันเมธอด fullscreenEle() หลังจาก 8000 มิลลิวินาที (8 วินาที) -

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