CSS快捷的全屏和取消全屏

最新推荐文章于 2022-07-25 21:21:51 发布

壮士阿

最新推荐文章于 2022-07-25 21:21:51 发布

阅读量320

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_39580561/article/details/120489645

版权

<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;
}

壮士阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS快捷的全屏和取消全屏

<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:
复制链接

扫一扫