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

Question

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

  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的情况下这样做。

Answer 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';

Answer 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';
}

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