Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Fullscreen HTML Menggunakan fullscreenElement DOM

Properti fullscreenElement pada HTML digunakan untuk mengembalikan elemen yang saat ini sedang pada posisi fullscreen atau ditampilkan pada mode layar penuh. Properti ini mungkin membutuhkan prefix spesifik yang bekerja dengan browser yang berbeda pula.

Cara Penggunaan Properti fullscreenElement DOM pada HTML
Ilustrasi fullscreenElement DOM HTML

Sebelum memahami lebih dalam materi tentang Membuat Fullscreen HTML Menggunakan fullscreenElement DOM, terlebih dahulu pelajari materi tentang: Membuat Daftar Form HTML Menggunakan Forms Collection DOM [klik], Memberikan Perintah Spesifik HTML Menggunakan execCommand DOM [klik], dan Embed Collection HTML DOM dan Fungsinya [klik].

Sintak:
document.fullscreenElement

Return Value: mengembalikan elemen yang saat ini sedang dalam mode fullscreen atau null, jika mode fullscreen tidak tersedia.

Baca Juga: 

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

method fullscreenElement

</title>

</head>

 

<body>

 

<h1 style="color: green">

Blog Elfan

</h1>

 

<p>

<b>

method fullscreenElement

</b>

</p>

 

<p>

Elemen fulscreen saat ini akan 

muncul pada console setelah 5 

detik.

</p>

 

<img id="image" src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtScPwjtA7g64aDduxeEd6YdFJqUYA2IU0Vv2ysXZEw4PVziHYCoGp4SRQh6zz0BhzgZJ07-_-0M7-Hj70c0nWxZ85Iz3icubb5fR-UJYoreKKAk9JDuitrkcAX1yCKoeO93LrxHwgps/s2048/logo%2Bsman%2B8%2Bsemarang.png" />

 

<br>

 

<button onclick="goFullScreen();">

Mode fullscreen

</button>

 

<script>

/* Log elemen saat ini dalam 

mode fullscreen */

function checkFullscreenElement() 

{

console.log(

/* Sintak Standar */

document.fullscreenElement ||

/* Sintak untuk Browser 

Chrome, Safari, dan Opera */

document.webkitFullscreenElement ||

/* Sintak Firefox */

document.mozFullScreenElement ||

/* Sintak IE/Edge */

document.msFullscreenElement)

}

 

/* Memanggil fungsi tersebut 

setelah 5 detik, user tidak 

dapat menekan tombol apapun 

untuk mengeksekusi fungsi 

selama dalam mode fullscreen 

*/

setTimeout(checkFullscreenElement, 5000);

/* Go fullscreen */

function goFullScreen() 

{

 

if (

/* Sintak Standar */

document.fullscreenEnabled ||

/* Sintak Chrome, Safari, dan 

Opera */

document.webkitFullscreenEnabled ||

/* Sintak Firefox */

document.mozFullScreenEnabled ||

/* Sintak IE/Edge */

document.msFullscreenEnabled)

 

{

elem = document.querySelector('#image');

/* Try mode Fullscreen */

elem.requestFullscreen();

 

else 

{

console.log('Fullscreen tidak tersedia saat ini.')

}

 

}

</script>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Annisa Diah Kusuma Piri, Annisa Noor Rahmawati, Antoinette Kirsten Jocelin Sugiarto, Arviant Dwi Andhika Gunawan, dan Atharaditya Yumna Yafi.

5 komentar untuk "Membuat Fullscreen HTML Menggunakan fullscreenElement DOM"

  1. Apa fungsi fullscreenElement pada html?

    BalasHapus
    Balasan
    1. Properti fullscreenElement berfungsi untuk mengembalikan elemen saat ini yang ditampilkan dalam mode layar penuh, atau null saat tidak dalam mode tersebut.

      Hapus
    2. Properti fullscreenElement berfungsi untuk mengembalikan elemen yang saat ini dijasikan dalam mode layar penuh dalam dokumen saat ini, atau akan memberikan nilai null jika mode layar penuh sedang tidak digunakan.

      Meskipun hanya bersifat read-only, properti ini tidak akan dibuang jika dimodifikasi atau bahkan dalam mode strict.

      Hapus
  2. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan fungsi fullscreenElement pada html?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser populer dan dapat digunakan untuk mengaktifkan fungsi fullscreenElement pada html:
      1. Google Chrome 45.0
      2. Internet Explorer 11.0
      3. Firefox 47.0
      4. Opera 15.0
      5. Safari 5.1

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -