Javascript - 设置 DIV 大小，无需等待页面加载结束

发布于 2024-12-20 10:23:47 字数 338 浏览 1 评论 0原文

我有一个 DIV，我想根据窗口大小调整其大小。所以我有一个 javascript 方法，它返回要应用的新闻大小。但我不知道如何在不必等待页面加载结束的情况下定义 div 的大小。

我的意思是，我在页面上有一些很长的加载对象，所以如果我使用 window.onload 方式设置大小，我的 div 在开始时大小不好，然后当页面加载时，div 会调整大小。巴阿德看着。

我想在页面显示后立即设置该大小，例如：

<div id="myid" style="width:myjavascript_Getcorrectsize();">

我将如何做这样的事情？

原文

I have a DIV I want to adjust its size regarding the window size. So I have a javascript method that returns the newsize to apply. But I don't see how I can define that size to the div without having to wait the end of page load.

I mean, I have some long loading objects on the page, so if I use the window.onload way to set the size, I have a div with a bad size at the start, then when the page is loaded, the div is resized. Baaad looking.

I'd like to set that size as soon as the page is displayed, with something like :

<div id="myid" style="width:myjavascript_Getcorrectsize();">

How would I do such a thing ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁吢 2024-12-27 10:23:47

您不必等待 window load 事件，甚至不需要等待某些库提供的“ready”事件。只需将脚本块放在相关 div 的之后，您就可以通过 DOM 访问该 div 来设置其大小。例如：

<body>
  <div id="target">This is the target, JavaScript makes it 100px wide</div>
  <script>
    (function() {
      var elm = document.getElementById("target");

      elm.style.width = "100px";
    })();
  </script>
</body>

现场演示

参考资料：

也就是说，如果您可以通过 CSS 设置大小，你会过得更好。但我希望您已经发现由于某种原因您不能这样做。

You don't have to wait for the window load event, or even for the "ready" events that some libraries provide. Just put your script block after the div in question, and you will be able to access that div via the DOM to set its size. E.g.:

<body>
  <div id="target">This is the target, JavaScript makes it 100px wide</div>
  <script>
    (function() {
      var elm = document.getElementById("target");

      elm.style.width = "100px";
    })();
  </script>
</body>

Live demo

References:

That said, if you can possibly set the size via CSS, you'd be better off. But I expect you've already found that for some reason you can't do that.

回复收藏 0 原文

給妳壹絲溫柔 2024-12-27 10:23:47

最简单的方法是在文档末尾插入

...
<script>
(function(){ //<-- This part is optional, but recommended if you don't want
             // to leak variables to the global scope
    document.getElementById("myid").style.width = myjavascript_Getcorrectsize();
})();
</script>
</body>

如果您希望元素具有特定的相对宽度，您还可以使用相对单位而不是 JavaScript：

<div id="myid" style="width:50%">

The easiest method is to insert a <script> block at the end of your document, and execute the desired code:

...
<script>
(function(){ //<-- This part is optional, but recommended if you don't want
             // to leak variables to the global scope
    document.getElementById("myid").style.width = myjavascript_Getcorrectsize();
})();
</script>
</body>

If you want the element to have a specific relative width, you can also use relative units instead of JavaScript: