Question

有2个div：Div1和Div2。

如果Div2的高度较小，我有一个确定Div1高度的功能并设置Div2的高度以匹配它。

如果Div2的高度较小，我试图让该功能也将Div2的lineheight设置为Div1的高度。

这对我来说非常棘手。

我的尝试：

$(document).ready(function() {

    function setDiv2Height(){

        var Div1Height = $('#Div1').height();
        var Div2Height = $('#Div2').height();

        if (Div2Height < Div1Height) {    
            $('#Div2').height($('#Div1').height()); 

            $('#Div2').css("line-height", ($('#Div1').height())));
        }

    }

});

Answer 1

我认为您可以使用else子句

    $(document).ready(function() {

        function setDiv2Height(){

            var Div1Height = $('#Div1').height();
            var Div2Height = $('#Div2').height();

            if (Div2Height < Div1Height) {    
                $('#Div2').height(Div1Height+'px'); 
                $('#Div2').css("line-height", (Div1Height)+'px');
            }else{
                $('#Div1').height(Div2Height+'px'); 
                $('#Div1').css("line-height", (Div2Height)+'px');                   
            }

        }

    });

Answer 2

查看jQuery的height文档，您将看到该方法返回绝对值，如无单位（例如400，而不是400px）。在条件的第二行，您要设置line-height的{{1}}值，但请注意，line-height是一个需要值和度量单位的属性，例如{{1 }}。由于您的代码基本上是#Div2（没有单位），它不应该工作。我改为使用css，它返回值和单位。这应该有效：

line-height: 3px

另外，你在这一行中有一个小括号问题，所以要小心。

修改

正如A. Wolff所指出的，line-height: xx并不需要一个单位。如果我更加小心，我已经看过this。但我仍然认为你应该使用$('#Div2').css("line-height", $('#Div1').css('height'));，即使你第一次设置你的变量。这就是我的表现。

Answer 3

你的代码中有拼写错误，这可能会导致问题吗？

而不是

$(function() {
  var boxes = $("div");
  var z = 4;
    boxes.each(function() {
        $(this).zIndex(z--);
    });
});

使用

$('#Div2').css("line-height", ($('#Div1').height())));

Answer 4

删除额外的)。和div { line-height: 1.2;}与设置div { line-height: 1.2em;}相同。因此，您可能需要将number更改为number + 'px';

$(document).ready(function() {

    setTimeout(function setDiv2Height(){

        var Div1Height = $('#Div1').height();
        var Div2Height = $('#Div2').height();

        if (Div2Height < Div1Height) {    
            $('#Div2').height($('#Div1').height()); 

            $('#Div2').css("line-height", ($('#Div1').height()+"px"));
        }

    },2000);

});

#Div1{
    height:200px;
    border:1px solid black;
    width:100%;
}

#Div2{
    height:100px;
    width:100%;
    border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Div1">1qaz</div>
<div id="Div2">1qaz</div>

通过jQuery设置div的行高？

4 个答案:

通过jQuery设置di​​v的行高？

4 个答案:

通过jQuery设置div的行高？