HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOMfullscreenElementプロパティ

HTML DOM fullscreenElementプロパティは、現在フルスクリーンモードで表示されている要素を返すために使用されます。指定された要素がフルスクリーンでない場合はnullを返します。

構文

以下は、fullscreenElementプロパティの構文です-

document.fullscreenElement

fullscreenElementプロパティの例を見てみましょう-

注 −この例には、Chrome、Safari、Operaの標準の構文とブラウザプレフィックスのみが含まれています。ブラウザのプレフィックスについては、最後のセクションを確認してください。

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<script>
   function FullscreenEle() {
      console.log(document.fullscreenElement || /*Standard Syntax*/
      document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
   }
   setTimeout(FullscreenEle, 8000);
   function EnableFullScreen() {
      var elem = document.getElementById("image");
      if (elem.requestFullscreen) /*Standard Syntax*/
         elem.requestFullscreen();
      else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
         elem.webkitRequestFullscreen();
      else
         console.log('You cannot go fullscreen currently')
   }
</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>

出力

これにより、次の出力が生成されます-

HTMLDOMfullscreenElementプロパティ

「全画面表示」をクリックすると-

HTMLDOMfullscreenElementプロパティ

上記の例では-

最初に、IDが「image」で画像リンクがsrc属性値の要素を作成しました-

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

次に、ユーザーがクリックしたときにEnableFullScreen（）メソッドを実行する「Gofullscreen」ボタンを作成しました-

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

EnableFullScreen（）メソッドは、ドキュメントオブジェクトのgetElementById（）メソッドを使用してimg要素を取得し、それを変数elemに割り当てます。 requestFullScreenプロパティを使用して、要素をフルスクリーンモードで開くことができるかどうか、またはimg要素のrequestFullScreenプロパティを使用しないかどうかを確認します。

その要素をフルスクリーンで開くことができる場合は、requestFullScreen（）メソッドを使用して、その要素をフルスクリーンモードで取得します。要素をフルスクリーンモードで表示できない場合は、console.log（）メソッドを使用してコンソールにメッセージを表示します。

function EnableFullScreen() {
   var elem = document.getElementById("image");
   if (elem.requestFullscreen) /*Standard Syntax*/
      elem.requestFullscreen();
   else if (elem.webkitRequestFullscreen) /*For Chrome,Safari and Opera*/
      elem.webkitRequestFullscreen();
   else
      console.log('You cannot go fullscreen currently')
}

要素が全画面表示になった後は何もクリックできないため、setTimeout（fullscreenEle、8000）メソッドを使用して、8000ms（8s）後にfullscreenEle（）メソッドを実行するように指定します-

setTimeout(FullscreenEle, 8000);

FullscreenEle（）関数は、現在フルスクリーンモードになっている要素を返し、console.log（）メソッドを使用して、要素をコンソールタブに表示します-

function FullscreenEle() {
   console.log(document.fullscreenElement|| /*Standard Syntax*/
   document.webkitFullscreenElement); /*For Chrome,Safari and Opera*/
}

注 −目的のブラウザで機能させるには、この例に特定のプレフィックスを使用する必要があります。上記の例では、Chrome、Opera、Safariブラウザの標準の構文とブラウザプレフィックスのみを記述しています。以下は、ブラウザのプレフィックスです。

  • requestFullscreenの場合
    • Firefox：mozRequestFullScreen
    • IE / Edge：msRequestFullscreen
  • fullscreenElementの場合
    • Firefox：mozFullScreenElement
    • IE / Edge：msRequestFullscreen

  1. HTMLDOMスタイルのpageBreakInsideプロパティ

    HTML DOMスタイルのpageBreakInsideプロパティは、HTMLドキュメントのHTML要素内の印刷または印刷プレビューのページ分割動作を返し、変更します。 構文 以下は構文です- 1. pageBreakInsideを返す object.pageBreakInside 2.pageBreakInsideの変更 object.pageBreakInside = “value” ここで、値は-になります。 値 説明 初期 このプロパティ値をデフォルト値に設定します。 継承 このプロパティ値は親要素から継承されます。 自動 必要に応じて、H

  2. HTMLDOMスタイルの表示プロパティ

    HTML DOMスタイルの表示プロパティは、要素の表示タイプを設定または返すために使用されます。要素は主にブロックまたはインラインです。 display：noneを使用して要素を非表示にすることもできます。 以下は、-の構文です。 表示プロパティの設定- object.style.display = value 上記のプロパティ値は次のように説明されます- 値 説明 インライン 要素をインライン要素として表示する場合、つまり、widthプロパティとheightプロパティは効果がありません。 ブロック ブロック要素は新しい行に表示され、幅全体を取ります。