0

我是 html 新手。当我按下 alt 和空格键时，我可以让网页中的特定 div 全屏显示吗？这是我的代码。

<!DOCTYPE html>
<html>

    <body>
        <p>This is some text.</p>
        <div style="color:#0000FF">
            <img src="./1.jpg" height="42" width="42">
        </div>
    </body>

</html>
4

2 回答 2

-1

使用full-screen伪类（用于 webkit 和 mozila）：

:-webkit-full-screen {
  /* css rules for full screen */
}
:-moz-full-screen {
  /* css rules for full screen */
}

有关用法，请参阅此 Mozilla 文章和此 David Walsh 文章

于 2013-08-28T07:59:57.013 回答
-2

HTML 和 CSS 无法为元素触发全屏模式。JavaScript 是您唯一的选择。

HTML 5 为 JavaScript 引入了全屏 API。它仍然是实验性的，因此您需要在某些浏览器中使用前缀属性名称，而在其他浏览器中它根本不起作用。

function makeFullScreen(element) {
    if (element.requestFullScreen) {
        element.requestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullScreen) {
        element.msRequestFullScreen();
    } 
}

然后你只需要绑定一个事件处理程序来调用它。

document.addEventListener('keypress', function (evt) {
  if (evt.altKey && evt.keyCode === 32) {
     makeFullScreen(document.querySelector('div')); 
  }
});

不过要小心依赖修饰键。在我的系统上，alt + space 在操作系统级别被捕获（以打开 Spotlight），因此它永远不会到达浏览器。

于 2013-08-28T08:03:29.583 回答