Question

我写了一个程序，可以在每次点击或按键时更改页面背景。

问题1 - 我必须给身体 - 身高和宽度。没有它，它将无法运作。好像身体根本没有高度。有没有办法得到像body = window？

问题2 - 如何通过javascript获取实际的窗口/屏幕大小？

<style>
  body {
     background-color: yellow;
     height: 800px;
     width: 1400px;
        }
</style>

<body onclick="myFunction()" onkeydown="myFunction()">

script
    var news=0; // to check if new page load -> to go to full screen

    function myFunction() {   
       // GO TO FULL SCREEN ON PAGE LOAD (OR REFRESH)
       if (news==0) {
          var elem = document.documentElement;
          if (elem.requestFullscreen) {
             elem.requestFullscreen();
          } else if (elem.msRequestFullscreen) {
             elem.msRequestFullscreen();
          } else if (elem.mozRequestFullScreen) {
             elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
             elem.webkitRequestFullscreen();
          }
          news = 1; 
       }

       // give the body a new random color
       var letters = '0123456789ABCDEF';
       var color = '#';
       for (var i = 0; i < 6; i++ ) {
          color += letters[Math.floor(Math.random() * 16)];
       }
       document.body.style.backgroundColor = color;

    }
 </script>
</body>

Answer 1

你可以给你的身体100％的身高，这将占用所有可用的空间。通常，您必须为父元素提供一些固定高度，以便您可以使用百分比，但html元素是一个例外，因此您可以执行以下操作：

html, body {
    height: 100%;
}

至于获取维度，有许多不同的方法可以提供不同的度量depending on what you are looking for。在这种情况下，我想最相关的是window.innerHeight

Answer 2

html, body {
    height: 100%;
}

这样可以让你的身体达到100％的可用高度。

然后您可以通过以下方式更改背景颜色：

document.body.style.backgroundColor = color并且您不需要知道高度或设置它。（它已经设定好了。）

Answer 3

这可以通过CSS解决。

 body {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    box-sizing:border-box;
    background: yellow;
    overflow:auto;
 }

现在，body标签将占据屏幕的整个宽度和高度。

如何在不知道其大小的情况下更改整个页面背景颜色？

3 个答案: