【问题标题】:Resize of div is being ignoreddiv 的调整大小被忽略
【发布时间】:2019-02-15 13:03:48
【问题描述】:

我有一个超级简单的网页,可以将服务器中的数据作为容器加载到 s 中。问题是有时图像太高,溢出并导致布局问题。所以,我希望使用以下方法调整 div 的大小:

target.style.height = height; // As short form of:
document.getElementById('someId').style.height=height;

但到目前为止,我尝试过的任何方法都没有奏效。这是html文件:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#E3FBFF" text="#000000" onload="loadImages();">
      <script type = "text/javascript">
        function loadImages()
        {
          ...Function omitted for brevity...
          But it gets to this line:
          document.getElementById(d0).style.height = height+10;
        }
  </script>
    <div id=d0></div>
    <hr>
    <div id=d1></div>
    <hr>
    <div id=d2></div>
    <hr>
    <div id=d3></div>
    <hr>
    </body>
    </html>

就是这样!

我找到了各种文章 like this onethis one,但是,它们没有帮助。

我突然想到,就我而言,我不需要使用 div 本身。我只需要图像和相关文本不垂直(或水平)重叠。事实上,当图像加载时,它可能是一团糟。 ...我怎样才能告诉我的 div 是全宽的,没有其他 div 的覆盖?我尝试使用一个类,使用 CSS 等等,都被忽略了。

我想我是在不正确的假设下工作的,即 div 作为面向块的东西,即使您声明全宽(“width=100%”)可以并且仍然会根据放置在其中的内容垂直重叠。

【问题讨论】:

  • 什么是“高度”?看来你没有声明它,在设置高度时你应该附加'px'或'%',只是分配一个数字是行不通的
  • 我相信@ChrisLi 是正确的,我只是想补充一点,这是因为style 指的是CSS 属性,这就是它需要单位的原因。请参阅:developer.mozilla.org/en-US/docs/Web/CSS/height 和您链接的第一个示例,他们将+ "px" 添加到末尾的高度值。
  • @ChrisLi 好的,那么,如何在我的整数后面加上“px”?!有一个 +"px"?

标签: javascript html styles width


【解决方案1】:

您没有显示分配给“身高”的内容,但从您的代码中我认为它是一个整数。

document.getElementById(d0).style.height = height+10;

style 需要一个字符串(即 10px),所以给它分配数字是行不通的,试试下面的

document.getElementById(d0).style.height = height+10+'px';

javascript 将为您将其转换为字符串
更多关于整数到这里的字符串What's the best way to convert a number to a string in JavaScript?

【讨论】:

    【解决方案2】:

    为您的height 变量添加一个单位。在编辑元素的 CSS 样式时,这是必需的。见:MDN

    document.getElementById('someId').style.height=height 变为: document.getElementById('someId').style.height = height.toString() + 'px'

    【讨论】:

    • 试试 int.toString()
    猜你喜欢
    • 2011-11-23
    • 1970-01-01
    • 1970-01-01
    • 2014-03-06
    • 2020-02-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多