Javascript 正确渲染所需的延迟或主体上的指定宽度_Javascript_Html_Document Body

Javascript 正确渲染所需的延迟或主体上的指定宽度

javascript html

Javascript 正确渲染所需的延迟或主体上的指定宽度,javascript,html,document-body,Javascript,Html,Document Body,（如果有人出于娱乐目的对背景故事感兴趣，这是一个跟进。它可能不会帮助你理解这个问题。）这里有两个元素和，它们通过JavaScript获得了它们的宽度和高度，因此它们的组合宽度就是屏幕的宽度（请注意，它们的显示是内联块）。如果在web浏览器（一个最大化的浏览器，使浏览器的宽度等于屏幕的宽度）中运行此代码，您可能会注意到主体与元素不匹配： <!DOCTYPE html> <html> <body> <aside></aside&g

（如果有人出于娱乐目的对背景故事感兴趣，这是一个跟进。它可能不会帮助你理解这个问题。）

这里有两个元素

和

，它们通过JavaScript获得了它们的宽度和高度，因此它们的组合宽度就是屏幕的宽度（请注意，它们的显示是内联块）。如果在web浏览器（一个最大化的浏览器，使浏览器的宽度等于屏幕的宽度）中运行此代码，您可能会注意到主体与元素不匹配：

<!DOCTYPE html>
<html>    
<body> 

<aside></aside><!-- comment to remove inline-block whitespace

--><main></main>

<script>
  var h = screen.height/100;
  var w = screen.width/100;

  var e = document.getElementsByTagName("aside")[0].style;
  e.display = "inline-block";
  e.backgroundColor = "lightblue";
  e.width = 14*w + "px";
  e.height = 69*h + "px";
  e.marginRight = 0.5*w + "px";

  e = document.getElementsByTagName("main")[0].style;
  e.display = "inline-block";
  e.backgroundColor = "green";
  e.width = 85.5*w + "px";
  e.height = 69*h + "px";   

  e = document.getElementsByTagName("body")[0].style;
  e.margin = e.padding = "0";
  e.backgroundColor = "black";
</script>
</body>
</html>

尽管我已经自由地胡乱猜测来解释这一点，但实际上我并不知道到底发生了什么

为什么元素没有正确放置在第一位，为什么这两种解决方案有效？

（注意：也可以通过使用

e.whitespace=“nowrap”将正文的空白设置为nowrap来解决此问题；

，但我怀疑这与其他两个不一样。这不是为主体内的元素创建空间，而是强制元素彼此相邻，即使主体内没有足够的空间。）

在运行代码之前，您应该等待DOM可用，请参阅此处：。这可能就是setTimeout工作的原因。此外，还应该为不同的元素指定单独的变量名

// self executing function before closing body tag
(function() {
   // your code here
   // the DOM will be available here
})();

您使用Javascript而不是CSS来完成此任务有什么原因吗？我建议为元素提供css id ie id=“aside”，然后设置css样式：

html,body {
  width: 100%;
  height: 100%;
}
#aside {
  display:inline-block;
  position: relative;
  float: left;
  width: 14%;
  height: 69%;
  background: blue;
}
#main {
  display:inline-block;
  position: relative;
  float: left;
  width: 86%;
  height: 31%;
  background: azure;
}

在运行代码之前，应该等待DOM可用，请参见此处：。这可能就是setTimeout工作的原因。此外，还应该为不同的元素指定单独的变量名

// self executing function before closing body tag
(function() {
   // your code here
   // the DOM will be available here
})();

您使用Javascript而不是CSS来完成此任务有什么原因吗？我建议为元素提供css id ie id=“aside”，然后设置css样式：

html,body {
  width: 100%;
  height: 100%;
}
#aside {
  display:inline-block;
  position: relative;
  float: left;
  width: 14%;
  height: 69%;
  background: blue;
}
#main {
  display:inline-block;
  position: relative;
  float: left;
  width: 86%;
  height: 31%;
  background: azure;
}

在你的链接中，对这个问题的公认答案是，将JavaScript放在正文的末尾就足够了，我已经这样做了。为了回答你的第二点，我所知道的任何CSS都不能在

screen.width

和

screen.height

方面将HTML的样式设置为与JavaScript样式设置相同的样式在CSS中，指的是web浏览器的宽度/高度，而不是屏幕。公认的答案还说，在DOM准备就绪后，通过将代码包装在自动执行函数中或像jQuery一样使用就绪代码来执行js，试试看你的表现如何。我现在已经更新了答案，让我知道这是否对你有效。在你的链接中，对这个问题的公认答案表明，将JavaScript放在正文的末尾已经足够好了，我已经这样做了。要回答你的第二点，据我所知，在

screen.width

和

screen.height

方面，没有任何CSS能够以与JavaScript样式相同的方式对HTML进行样式设置在CSS中，指的是web浏览器的宽度/高度，而不是屏幕。公认的答案还说，要在DOM就绪后执行js，请将代码包装在一个自动执行函数中，或者像jQuery那样使用就绪代码，试试看效果如何。我现在已经更新了答案，让我知道这是否适用于您。