Javascript：使用元素高度作为像素值来设置其他元素的属性答案

【问题标题】：Javascript: Using element height as pixel value to set properties of other elementsJavascript：使用元素高度作为像素值来设置其他元素的属性
【发布时间】：2013-12-27 12:08:11
【问题描述】：

我正在尝试根据另一个元素的高度设置某些元素的高度和边距，但它不起作用。

  function matchHeight(divName) {
    var Sheight = document.getElementById(divName).style.height;

    document.getElementById('bookmark').style.height = Sheight + '45px';
    document.getElementById('bookmarkend').style.marginTop = Sheight + '45px';
    document.getElementById('bookmarktagI').style.height = Sheight + '255px';
  }

我的函数有什么问题？

如果可能的话，我宁愿不使用 jquery。

【问题讨论】：

那么调试第一步应该是console.log(Sheight) - 看看它是否是 (a) 您期望的值，以及 (b) 将 '45px' 连接到... /跨度>
style.height 返回类似100px，然后添加45px，得到100px45px，这不是一个有效值？
您到底期待什么？你也可以添加一些html吗？

标签： javascript css height margins

【解决方案1】：

如果您的样式是内联设置的，即<div style="height: 100px;"></div>，那么很可能您的问题在于解析height 样式值。在这种情况下，Sheight 将是 "100px"，它将简单地与其他值连接形成类似 100px45px 的东西，这不是很好。

为了解决问题，使用parseInt 将值解析为整数并使用正确的加法：

var Sheight = parseInt(document.getElementById(divName).style.height, 10);
document.getElementById('bookmark').style.height = (Sheight + 45) + 'px';

【讨论】：

效果很好！你太棒了。

【解决方案2】：

试试这个：

function matchHeight(divName) {
  var Sheight = parseInt(document.getElementById(divName).style.height);

  document.getElementById('bookmark').style.height = Sheight + 45 + 'px';
  document.getElementById('bookmarkend').style.marginTop = Sheight + 45 + 'px';
  document.getElementById('bookmarktagI').style.height = Sheight + 255 + 'px';
}

您的 + 将被视为字符串连接，否则会给您错误的值。

【讨论】：

不需要像height = Sheight + 45 + 'px'; 这样吗？
您实际上确实需要 px，并且在 javascript 样式中是字符串，如返回值是 '100px' 等。