Question

我是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>

Answer 1

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

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

请参阅this Mozilla article和this David Walsh article了解

Answer 2

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

HTML 5为JavaScript引入了full screen API。它仍然是实验性的，因此您需要使用prefixed property names in some browsers and it won't work at all in others。

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 +空间（打开Spotlight），因此它永远不会到达浏览器。

div以全屏显示

2 个答案: