将 outerHeight 与 padding 相加给出错误的结果

Question

我想将 div 的 outerheight() 值与另一个 div 的 padding-top 值相加。这是我的函数

    var headerHeight = $('header').outerHeight() + "px";
    console.log(headerHeight);
    var containerPT = $(".container").css('padding-top');
    console.log(containerPT);
    var totalSpace = (headerHeight + containerPT);
    console.log(totalSpace);

结果是：

//headerHeight 
474px
//containerPT 
150px
//totalSpace 
474px150px

我需要的结果当然是474 + 150 = 624px；我通常很容易总结东西，我不确定为什么会这样以及我做错了什么。非常感谢任何帮助。

Answer 1

我创建了一个工作演示，您仍然应该解析这些值。不知何故 jQuery 仍然将它作为字符串返回，并且还添加了一个替换方法来删除 px 在检索 css 值时就像从 padding-top 一样。检查下面的更新代码

    var headerHeight = $('header').outerHeight();
    console.log(headerHeight + "px");
    var containerPT = $(".container").css('paddingTop').replace(/[^-\d\.]/g, '');

    console.log(containerPT + "px");
    var totalSpace = (parseInt(headerHeight) + parseInt(containerPT));
    console.log(totalSpace + "px");

header { height:200px; padding : 20px;}
.container { padding-top: 150px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  
 </header>
<div class="container">
  
 </div>

Answer 2

我曾经通过以下代码得到你的结果：

HTML代码：

<span id="resultHeight"></span>
<header></header>
<div class="container">

</div>

CSS代码：

header{height:474px;}
.container{height: 150px;}

JQuery代码：

var headerHeight = parseInt($('header').outerHeight());
    console.log(headerHeight);
    var containerPT = parseInt($(".container").outerHeight());
    console.log(containerPT);
    var totalSpace = (headerHeight + containerPT)+"px";
    $("#resultHeight").html(totalSpace);

请参考下面link :

Click here

希望对你有帮助:)

Answer 3

您不会得到正确的结果，因为您添加的是 2 个字符串而不是 2 个数字。你应该做的是将它们转换成数字以获得正确的结果。为此，请使用 parseInt() 函数。

var totalSpace = (parseInt(headerHeight) + parseInt(containerPT));
console.log(totalSpace + "px");

希望这能给您带来想要的结果。

将 outerHeight 与 padding 相加给出错误的结果

summing outerHeight with padding gives wrong result

javascript

css

jquery

outerheight