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

由于您要添加2个字符串而不是2个数字，因此无法获得正确的结果。你应该做的是将它们转换成数字以获得正确的结果。为此，请使用content_item_id函数。

tag_id

我希望这会给你带来理想的结果。

Answer 2

我创建了一个工作演示，你仍然应该解析这些值。不知怎的，jQuery仍然以字符串形式返回它，并且还添加了一个替换方法，用于在从padding-top检索css值时删除px。检查下面的更新代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我曾经通过以下代码获得结果：

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

请参阅以下链接：

Click here

希望它可以帮助你：）

用填充求和outerHeight给出了错误的结果

3 个答案: