网页全屏功能 

 <style>
      html,body{
    position: relative;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}
.main{
    width: 50vw;
    padding: 2em;
    text-align: center;
    transition: background-color 100ms ease;
    background-color: orange;
}
.main:fullscreen{
    background-color: DarkRed;
    color: white;
}
    </style>
</head>
<body>
    <section class="main">
        <h1>元素在全屏显示模式下的CSS样式</h1>
        <p>css伪类:fullscreen应用于当前处于全屏显示模式的元素。</p>
        <button id="toggle-pattern">全屏模式</button>
    </section>
</body>
<script>
    const targetElement = document.querySelector('.main');
const togglePatternButton = document.querySelector('#toggle-pattern');
togglePatternButton.addEventListener('click', _ => {
    if (!document.fullscreenElement) {
        targetElement?.requestFullscreen();
        togglePatternButton.textContent = '退出全屏';
    } else {
        document.exitFullscreen();
        togglePatternButton.textContent = '全屏模式';
    }
});
</script>

　　

posted @ 2023-04-06 10:57  越甲鸣吾君  阅读(40)  评论(0)    收藏  举报