JavaScript Document fullscreen Property

What You’ll Learn

Document.fullscreen is a deprecated instance property that returns true or false for fullscreen mode. Learn the no-op setter quirk, why fullscreenElement is better, how it fits the Fullscreen API, and five examples with try-it labs.

Introduction

The Fullscreen API lets a page expand a video, game canvas, or gallery to fill the screen. Scripts often need a simple yes/no answer: “Are we in fullscreen right now?”

Historically, that answer was document.fullscreen. MDN now calls it obsolete and recommends checking Document.fullscreenElement instead—if it is not null, fullscreen mode is active.

Related Document tutorials: fragmentDirective, forms, Document constructor.

Understanding Document.fullscreen

An obsolete read-only instance property on Document that reports whether fullscreen mode is active (MDN).

• Value — true if an element is in fullscreen; otherwise false.
• Read-only — meant for reading, not controlling fullscreen.
• Lenient setter — assigning does not throw; the write is ignored (MDN).
• Deprecated — prefer fullscreenElement !== null (MDN).
• Related APIs — requestFullscreen, exitFullscreen, fullscreenEnabled.

📝 Syntax

document.fullscreen

Value

A Boolean: true if the document is displaying an element in fullscreen mode; otherwise false (MDN).

MDN modern replacement

function isDocumentInFullScreenMode() {
  return document.fullscreenElement !== null;
}

⚖️ Fullscreen Document APIs

Examples Gallery

Examples follow MDN Document: fullscreen. Fullscreen toggles usually need a user gesture (button click).

function isDocumentInFullScreenMode() {
  return document.fullscreen;
}

console.log("fullscreen?", isDocumentInFullScreenMode());

fullscreen? false

function isDocumentInFullScreenMode() {
  return document.fullscreenElement !== null;
}

console.log("fullscreen?", isDocumentInFullScreenMode());
console.log("element:", document.fullscreenElement);

fullscreen? false
element: null

"use strict";
const before = document.fullscreen;
document.fullscreen = true; // ignored — does not enter fullscreen
const after = document.fullscreen;
console.log({ before, after, changed: before !== after });

{ before: false, after: false, changed: false }

const box = document.getElementById("stage");

document.getElementById("toggle").addEventListener("click", async () => {
  try {
    if (!document.fullscreenElement) {
      await box.requestFullscreen();
    } else {
      await document.exitFullscreen();
    }
  } catch (err) {
    console.error(err);
  }
  // Prefer modern check:
  console.log("active?", document.fullscreenElement !== null);
  // Legacy (deprecated):
  console.log("legacy fullscreen?", document.fullscreen);
});

active? true
legacy fullscreen? true

document.addEventListener("fullscreenchange", () => {
  const active = document.fullscreenElement !== null;
  console.log("fullscreenchange →", active);
  // Do not depend on document.fullscreen in new UI code
});

document.addEventListener("fullscreenerror", (event) => {
  console.error("fullscreenerror", event);
});

fullscreenchange → true
fullscreenchange → false

🚀 Common Use Cases

• Legacy maintenance — recognize old if (document.fullscreen) checks.
• Migration — replace with fullscreenElement !== null.
• Teaching Fullscreen API — contrast Boolean vs Element APIs.
• Not for new features — MDN: avoid using it; update existing code.
• Video / games — toggle with requestFullscreen / exitFullscreen.
• UI state — listen to fullscreenchange instead of polling.

📝 Notes

• MDN: Deprecated — Deprecated banner shown above; not Experimental / Non-standard.
• Setter is a no-operation and is ignored; assigning does not throw (MDN).
• Prefer document.fullscreenElement !== null (MDN).
• Related Fullscreen APIs: fullscreenEnabled, requestFullscreen, exitFullscreen.
• Related: fragmentDirective, forms, Document constructor.

💡 Best Practices