1. Use the button to control the full screen function in the project
1. Select the element (usually a button) to realize the full screen function
var $fullBtn = document.querySelector('.fullBtn') //full screen button
2. Select the element to be full screen (full screen is generally body full screen is ok)
var $fullScreen = document.querySelector('body') //Get the body of the entire page
3. Monitor the full screen button to realize the full screen effect, the code is as follows:
2. Use the button in the project to exit the full screen operation
1. Select the element (usually a button) to exit the full screen function
var $cancelBtn = document.querySelector(".cancelBtn") //Exit button
2. Monitor the exit full screen effect realized by the exit full screen button, the code is as follows:
3. Use the Esc button in the project to exit the full screen (you don’t need to do any operations here, the computer can exit, but the Esc button is monitored here to make the "full screen button" disappear, otherwise it will not look good)
code show as below:
