How to Create a Full Screen View Element Using HTML and JavaScript?

Estimated read time 1 min read

You can create a full screen view element using HTML and JavaScript by using the fullscreenElement property of the document object and the requestFullscreen method. Here’s an example:

<button id="fullscreen-button">Enter Full Screen</button>
<div id="fullscreen-element">
  This is the full screen content.
</div>

<style>
  #fullscreen-element {
    width: 500px;
    height: 500px;
    background-color: lightgray;
  }
</style>

<script>
  let button = document.getElementById('fullscreen-button');
  let element = document.getElementById('fullscreen-element');

  button.addEventListener('click', function() {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      element.requestFullscreen();
    }
  });
</script>

In this example, a button with an id of fullscreen-button is created, along with a div element with an id of fullscreen-element that will be the full screen content. The button has an event listener attached that listens for a click event. When the button is clicked, the code checks if there is already a full screen element using the fullscreenElement property. If there is, the full screen is exited using the exitFullscreen method. If there is not, the div element is made full screen using the requestFullscreen method.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply