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

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

javascript css

Javascript 如何在不知道页面大小的情况下更改整个页面的背景色？,javascript,css,Javascript,Css,我写了一个程序，每次点击或按下键都会改变页面背景问题1-我必须给出身体的高度和宽度。没有这个就不行。就好像身体根本没有高度。有没有办法得到body=window这样的东西问题2-如何通过javascript获得实际的窗口/屏幕大小 <style> body { background-color: yellow; height: 800px; width: 1400px; } </style> <body onc

我写了一个程序，每次点击或按下键都会改变页面背景

问题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>


身体{
背景颜色：黄色；
高度：800px；
宽度：1400px；
}
剧本
var news=0；//检查新页面是否加载->转到全屏
函数myFunction（）{
//在页面加载（或刷新）时转到全屏
如果（新闻==0）{
var elem=document.documentElement；
if（元素请求全屏）{
元素请求全屏（）；
}else if（elem.msRequestFullscreen）{
elem.msRequestFullscreen（）；
}else if（元素mozRequestFullScreen）{
elem.mozRequestFullScreen（）；
}else if（元素webkitRequestFullscreen）{
elem.webkitRequestFullscreen（）；
}
新闻=1；
}
//给身体一个新的随机颜色
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
document.body.style.backgroundColor=颜色；
}

你可以给你的身体100%的高度，这将使它占据所有可用的空间。通常，您必须为父元素指定一些固定的高度，以便使用百分比，但是

html

元素是一个例外，因此您可以执行以下操作：

html, body {
    height: 100%;
}

对于尺寸的获取，有许多不同的方法，它们给出了不同的度量。在这种情况下，我认为最相关的是

window.innerHeight

html, body {
    height: 100%;
}

这将使你的身体达到现有高度的100%

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

document.body.style.backgroundColor=color

并且您不需要知道高度或设置高度。（已经设置好了）。

这可以通过CSS修复

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

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

需要先有内容，然后才有高度。这有点像给气球充气。空气越多，气球就越大。@user3586104请接受帮助您的答案！你这样做很有代表性；）在固定高度上是和否。要使百分比起作用，必须在父级上定义某些内容。如果父项是相对单位，如

rem

百分比仍然有效<代码>html从窗口继承。我想我要找的术语是父项上的“定义高度”，而不是固定高度。几乎。。。我得到一个垂直卷轴bar@user3586104这是因为您没有删除浏览器添加到

的页边距。默认情况下，请使用

正文{margin:0；}

。