JavaScript实现页面全屏

//innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
//innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

<script type="text/javascript">

  function FullScreen(el){
    var isFullscreen = document.fullScreen||document.mozFullScreen 
                       ||document.webkitIsFullScreen;
    if(!isFullscreen){//进入全屏,多重短路表达式
        (el.requestFullscreen&&el.requestFullscreen())||
        (el.mozRequestFullScreen&&el.mozRequestFullScreen())||
        (el.webkitRequestFullscreen&&el.webkitRequestFullscreen())|| 
        (el.msRequestFullscreen&&el.msRequestFullscreen());
    }else{	//退出全屏,三目运算符
        document.exitFullscreen?document.exitFullscreen():
        document.mozCancelFullScreen?document.mozCancelFullScreen():
        document.webkitExitFullscreen?document.webkitExitFullscreen():'';
    }
  }
  function toggleFullScreen(e){
     var el=e.srcElement||e.target;//target兼容Firefox
     el.innerHTML=='点我全屏'?el.innerHTML='退出全屏':el.innerHTML='点我全屏';
     FullScreen(el);
  }
</script>
<button οnclick="toggleFullScreen(event)">点我全屏</button>
发布了60 篇原创文章 · 获赞 11 · 访问量 6万+

猜你喜欢

转载自blog.csdn.net/mianyao1004/article/details/103973356