1

我想将一个 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; 我通常很容易总结东西，我不确定为什么会发生这种情况以及我做错了什么。非常感谢任何帮助。

4

3 回答 3

1

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

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

我希望这会给你想要的结果。

于 2016-07-03T19:28:21.347 回答
0

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

    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>

于 2016-07-03T18:56:34.213 回答
0

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

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);

请参考以下链接：

点击这里

希望它可以帮助你:)

于 2016-07-03T19:27:27.393 回答