HTML DOM fullscreenElement用法及代码示例

HTML中的fullscreenElement属性用于返回当前处于全屏状态的元素。此属性可能需要特定的前缀才能与不同的浏览器一起使用。

用法:

document.fullscreenElement

返回值：返回当前处于全屏模式的元素；如果全屏模式不可用，则返回null。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>fullscreenElement method</title> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksForGeeks</h1> 
    <p><b>fullscreenElement method</b></p> 
    <p>The current fullscreen element will  
       appear in the console after 5 seconds.</p> 
  
    <img id="image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    <br> 
    <button onclick="goFullScreen();">Go fullscreen</button> 
    <script> 
  
        /* Log the element currently in fullscreen */ 
        function checkFullscreenElement() { 
            console.log( 
                /* Standard syntax */ 
                document.fullscreenElement || 
  
                /* Chrome, Safari and Opera syntax */ 
                document.webkitFullscreenElement || 
  
                /* Firefox syntax */ 
                document.mozFullScreenElement || 
  
                /* IE/Edge syntax */ 
                document.msFullscreenElement 
            ) 
        } 
  
        /* Call this function after 5 seconds, 
        as we cannot click any button to execute  
        this function while in fullscreen */ 
        setTimeout(checkFullscreenElement, 5000); 
  
        /* Go fullscreen */ 
        function goFullScreen() { 
            if ( 
                /* Standard syntax */ 
                document.fullscreenEnabled || 
  
                /* Chrome, Safari and Opera syntax */ 
                document.webkitFullscreenEnabled || 
  
                /* Firefox syntax */ 
                document.mozFullScreenEnabled || 
  
                /* IE/Edge syntax */ 
                document.msFullscreenEnabled 
            ) { 
                elem = document.querySelector('#image'); 
  
                /* Try to go Fullscreen */ 
                elem.requestFullscreen(); 
            } else { 
                console.log('Fullscreen is not available currently.') 
            } 
        } 
    </script> 
</body> 
  
</html>

输出：

base-output

控制台输出：如果通过单击按钮激活了全屏模式。

fullscreen-elem

控制台输出：如果未激活全屏模式。

fullscreen-null

支持的浏览器：fullscreenElement属性支持的浏览器如下：

谷歌浏览器45.0
Internet Explorer 11.0
Firefox 47.0
Opera 15.0
Safari 5.1

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM fullscreenElement Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。