Question

我有一个元素。我们可以称之为元素A 。我希望元素A 与元素B 具有相同的height，并height 65px。例如，如果元素B 的height为500px，我希望元素A 拥有height 565px

我不擅长写作功能。我发现一个可以使元素A 与元素B 的高度相同，但没有额外的60px。

$(document).ready(function() {
  $("#ElementA").css("height", $("#ElementB").height());
});

谢谢！

Answer 1

只需添加所需的值 - 在这种情况下为65

＆＃13;

$(document).ready(function() {
  $("#ElementA").css("height", $("#ElementB").height() + 65);
  
  console.log("A:" + $("#ElementA").height() + "px");
  console.log("B:" + $("#ElementB").height() + "px");
});

＆＃13;

#ElementA {
  background-color: red;
  width: 10px;
}
#ElementB {
  background-color: orange;
  height: 20px;
  width: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ElementA">A</div>
<div id="ElementB">B</div>

＆＃13;

Answer 2

这是我的解决方案

$(function(){
  $("#ElementA").css("height", $("#ElementB").height()+65);
});

这是我的响应式解决方案

$(function(){
  $(window).resize(function(){
      $("#ElementA").css("height", $("#ElementB").height()+65);
  }).trigger('resize');
});

Answer 3

你可能最好这样做。

var SameHeights = function (){
    var height = 0;

    $('.allElements').each(function(index, element){
         height = $(element).height() > height ? $(element).height() : height;
    });
    $('.allElements').height(height +65);
}

SameHeights();//call the function here, and re-use it again in the future.

然后在您的HTML上，您将需要添加一个类（它更好）

<div class="allElements">Element A</div>
<div class="allElements">Element B</div>
<div class="allElements">Element C</div>

Answer 4

<script>
$(document).ready(function() {
  $("#ElementA").height( $("#ElementA").height() + 65 );
});

</script>

使元素的高度始终与其他元素相同，加上65px？

4 个答案: