首页 > 其他分享> > CSS快捷的全屏和取消全屏

CSS快捷的全屏和取消全屏

2021-09-26 15:30:28 作者：互联网

<style>
  .fullscreen {
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    z-index: 100;
    background-color: aquamarine;
    border-radius: 50%;
    box-shadow:blueviolet;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .divStyle {
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    border-radius: 50%;
    box-shadow:blueviolet;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
<body>
  <div class="divStyle" onclick="bigscreen()" id='cc'>123</div>
</body>
</html>
<script>
  function bigscreen() {
    const obj = document.getElementById('cc')
    obj.className = obj.className === 'fullscreen' ? 'divStyle' : 'fullscreen'
  }
</script>


//主要代码
.fullscreen {
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    z-index: 100;
}

标签：fullscreen,center,100%,height,width,important,快捷,全屏,CSS
来源： https://blog.csdn.net/qq_39580561/article/details/120489645