JavaScript Document fullscreenElement Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word FULLSCREENELEMENT

Definition

Document.fullscreenElement is a read-only property that returns the Element currently shown in fullscreen mode, or null if fullscreen is not active (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.fullscreenElement. Start with this line.

JavaScript
document.fullscreenElement
CallWhat it does
document.fullscreenElementPrimary signature.

Built into the browser. Read or assign document.fullscreenElement — no import required.

Library declarations
JavaScript
document.fullscreenElement

Parameters

ParameterDescription
Fullscreen elementOptional. Returned node (topmost if several)
fullscreenEnabledOptional. Whether the Fullscreen API is allowed

Return Value

Return ValueDescription
*Element or null

JavaScript Examples

Example 1 — Read fullscreenElement

Log the current fullscreen element (usually null on a normal page).

JavaScript
console.log(document.fullscreenElement);
// null when not in fullscreen
Try It Yourself

How It Works

  1. Read the property. No arguments — just access document.fullscreenElement.
  2. Expect null here. A normal document is not presenting fullscreen content.
  3. When active. After a successful requestFullscreen(), you get that element.
  4. Read-only. You observe state; you do not set it by assignment.

Example 2 — Is Fullscreen Active?

Use !== null as the modern replacement for deprecated document.fullscreen.

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

console.log(isDocumentInFullScreenMode());  // false (usually)
Try It Yourself

How It Works

  1. Ask for the element. null means not in fullscreen.
  2. Convert to Boolean. !== null answers the yes/no question.
  3. Replace legacy code. Same intent as document.fullscreen, without the deprecated API.
  4. Reuse the helper. Call it from click handlers or fullscreenchange.

Example 3 — Is a Video in Fullscreen? (MDN)

Check that fullscreen is active and the element is a VIDEO.

JavaScript
function isVideoInFullscreen() {
  if (document.fullscreenElement?.nodeName === "VIDEO") {
    return true;
  }
  return false;
}

console.log(isVideoInFullscreen());  // false (usually)
Try It Yourself

How It Works

  1. Optional chaining. ?. safely skips when fullscreenElement is null.
  2. Check nodeName. "VIDEO" means a video element is fullscreen.
  3. Return a Boolean. Useful for custom video chrome or analytics.
  4. Same idea for others. Swap "VIDEO" for "IMG", "CANVAS", etc. as needed.
Compatibility

Browser Support

Document.fullscreenElement is marked Limited availability on MDN (not Baseline). It is not Deprecated, Experimental, or Non-standard — still feature-detect in production.

✓ Limited availability · Not Baseline

Document.fullscreenElement

Read-only Element in fullscreen, or null — widely implemented in modern engines; verify for your support matrix.

Ltd Limited availability
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
fullscreenElement Limited

Bottom line: Prefer fullscreenElement !== null over deprecated document.fullscreen. Enter with element.requestFullscreen(), exit with document.exitFullscreen(), and listen for fullscreenchange.

Frequently Asked Questions

The Element currently presented in fullscreen mode in this document, or null if fullscreen mode is not in use (MDN).
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It is Limited availability (not Baseline), so feature-detect in production.
Use document.fullscreenElement !== null. This replaces the deprecated document.fullscreen Boolean.
MDN: the topmost (most recently requested) element is returned.
The property is read-only, but assigning does not throw — even in strict mode. The setter is a no-operation and is ignored (MDN).
Call element.requestFullscreen() to enter and document.exitFullscreen() to leave. Listen for fullscreenchange to update UI.

Next: fullscreenEnabled

Learn whether the Fullscreen API is allowed in the current context.

fullscreenEnabled tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document fullscreen Property JavaScript Document fullscreenEnabled Property