Question

我需要设置一个元素的高度等于div的高度，其高度根据其中的元素而变化

我制作了这个javascript代码，但它不起作用。

它出了什么问题？

HTML

<div id="a" onclick="changeHeight();">
</div>
<div id="button">
</div>

JAVASCRIPT

function changeHeight() {
var divHeight = $("#a").height();
document.getElementById('button').style.height = divHeight;
}

CSS

#a{width:300px;height:100px;background-color:black;}
#button{width:300px;background-color:green;}

Answer 1

与'px'（单位）

连接

function changeHeight() {
  var divHeight = $("#a").height();
  document.getElementById('button').style.height = divHeight + 'px';
}

#a {
  width: 300px;
  height: 100px;
  background-color: black;
}
#button {
  width: 300px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="a" onclick="changeHeight();"></div>
<div id="button"></div>

Answer 2

为什么要混合使用jQuery和vanilla Js？我用jQuery完全写了它，它看起来像是在工作：

＆＃13;

function changeHeight() {
  var divHeight = $("#a").height();
  $('#button').height(divHeight);
}

＆＃13;

#a{width:300px;height:100px;background-color:black;}
#button{width:300px;background-color:green;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" onclick="changeHeight();">
</div>
<div id="button">
</div>

＆＃13;

Answer 3

更新了小提琴：https://jsfiddle.net/sne40vh1/3/

主要问题是你试图在没有测量单位的情况下设置#button的高度（jQuery的.height方法只返回一个值，没有测量值）所以当你试图设置样式时vanilla JavaScript需要一个测量单位，它失败了（所以在这种情况下它需要'300px'，但你只是给它'300'。

我在这里更改了它有一个全局函数（不建议这样做，我只是为了小提琴而工作）并且改变了设置#button高度以匹配方式的方式你得到了#a的高度：

HTML：

<div id="a" onclick="changeHeight()"></div>
<div id="button"></div>

CSS：

#a{width:300px;height:100px;background-color:black;}
#button{width:300px;background-color:green;}

JS：

changeHeight = function() {
  var divHeight = $("#a").height();
  $('#button').height(divHeight);
}

为了更好地看到我的变化，请随意将我所做的与您的所做的事情进行比较。

javascript根据元素的高度改变高度

3 个答案: