HTML
 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 || /* 標準構文 */
        document.webkitFullscreenElement); /* Chrome、Safari、Opera 用 */
    }
    setTimeout(FullscreenEle, 8000);
    function EnableFullScreen() {
        var elem = document.getElementById("image");
        if (elem.requestFullscreen) /* 標準構文 */
            elem.requestFullscreen();
        else if (elem.webkitRequestFullscreen) /* Chrome、Safari、Opera 用 */
            elem.webkitRequestFullscreen();
        else
            console.log('現在フルスクリーンに切り替えられません')
    }
</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 プロパティとは？使い方とサンプルコードを解説

「Go fullscreen」ボタンをクリックすると −

HTML DOM fullscreenElement プロパティとは？使い方とサンプルコードを解説

コードの解説

上記の例では、まず id 属性に「image」を設定し、src 属性に画像リンクを指定した img 要素を作成しています。

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

続いて、「Go fullscreen」ボタンを作成しています。ユーザーがこのボタンをクリックすると、EnableFullScreen() メソッドが実行されます。

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

EnableFullScreen() メソッドでは、document オブジェクトの getElementById() メソッドを使って img 要素を取得し、変数 elem に代入します。その後、requestFullscreen プロパティを用いて、その要素がフルスクリーンモードで開けるかどうかを判定します。

要素がフルスクリーンで開ける場合は、requestFullscreen() メソッドを呼び出してその要素をフルスクリーン表示にします。フルスクリーンで表示できない場合は、console.log() メソッドを使ってコンソールにメッセージを出力します。

function EnableFullScreen() {
    var elem = document.getElementById("image");
    if (elem.requestFullscreen) /* 標準構文 */
        elem.requestFullscreen();
    else if (elem.webkitRequestFullscreen) /* Chrome、Safari、Opera 用 */
        elem.webkitRequestFullscreen();
    else
        console.log('現在フルスクリーンに切り替えられません')
}

要素がフルスクリーンになると、画面上の何もクリックできなくなります。そこで setTimeout(FullscreenEle, 8000) メソッドを使い、8000ミリ秒（8秒）後に FullscreenEle() メソッドが実行されるように指定しています。

setTimeout(FullscreenEle, 8000);

FullscreenEle() 関数は、現在フルスクリーンモードになっている要素を返し、console.log() メソッドによってコンソールタブにその要素を表示します。

function FullscreenEle() {
    console.log(document.fullscreenElement || /* 標準構文 */
    document.webkitFullscreenElement); /* Chrome、Safari、Opera 用 */
}

注意 − このサンプルをお使いのブラウザで動作させるには、ブラウザごとの専用プレフィックスを使用する必要があります。上記の例では標準構文と、Chrome・Opera・Safari 向けのプレフィックスのみを記載しています。以下に、主要ブラウザ向けのプレフィックスをまとめました。

  • requestFullscreen の場合
    • Firefox：mozRequestFullScreen
    • IE/Edge：msRequestFullscreen
  • fullscreenElement の場合
    • Firefox：mozFullScreenElement
    • IE/Edge：msRequestFullscreen
  1. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ

  2. HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

    HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明