sumding outerHeight with padding給出錯誤結果

我想將div的outerheight（）值與另一個div的padding-top值相加。這裏是我的功能sumding outerHeight with padding給出錯誤結果

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; 我通常總結一些東西，我不知道爲什麼會發生這種情況，我做錯了什麼。任何幫助非常感謝。

來源

2016-07-03 valerio0999

我更新了答案，檢查出來:) –

我創建了一個工作演示，你仍然應該解析值。不知何故，jQuery仍將它作爲字符串返回，並且還添加了一個替換方法來刪除px，以便像從填充頂部那樣檢索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-03 18:56:34

這不起作用 – valerio0999

您提供了代碼，我只是對其進行了更正。您將「px」添加到變量輸出中，這就是爲什麼它不會添加數字值，而是會附加上，因爲該變量將被視爲字符串。你能檢查你的控制檯日誌是否有錯誤？它應該工作，你可能有一個錯字，嘗試複製粘貼代碼;-) –

更新的代碼我用來獲得通過下面的代碼你的結果：

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

希望它可以幫助你:)

來源

2016-07-03 19:27:27

你不會得到正確的結果，因爲您要添加2串而不是2個數字。你應該做的是將它們轉換爲數字以獲得正確的結果。爲此，請使用parseInt()函數。

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

我希望這會給你想要的結果。

來源

2016-07-03 19:28:21 IchHabsDrauf

sumding outerHeight with padding給出錯誤結果

回答

相關問題