JQuery添加填充到原始填充

這可能很簡單，但我無法弄清楚。我想使用jQuery將padding-top添加到除了原始的頂部填充之外的div。我的代碼到目前爲止是：JQuery添加填充到原始填充

var headH = $('#header').outerHeight(); 
var mastPad = $('#masthead').css('padding-top'); 
$('#masthead').css('padding-top', mastPad + headH);

這導致了大量的填充我認爲，因爲JQuery不斷擴大填充。我需要找到一種方法來抓住原來的填充頂部，然後添加到它。

由於

來源

2014-11-14 DesignSubway

你叫這個多次？如果是這樣，則不需要存儲「原始填充」。 – epascarello 2014-11-14 15:40:22

哎呀，對不起，不知道你的意思@epascarello 我想我只是調用一次。 – DesignSubway 2014-11-14 15:41:17

它如何繼續增長？另外，您不會從值中刪除px /％/ em。 – epascarello 2014-11-14 15:41:49

$('#masthead').css('padding-top')返回串，不是一個數字，所以它可能是headH正在所附到字符串，而不是添加到其數值;

也許：

$('#masthead').css('padding-top', parseInt(mastPad, 10) + headH);

parseInt將解析它可以找到，然後忽略其他。所以"42px"變成42（而使用一元+或Number會在px部分窒息）。

這裏是一個自包含的例子，與with DIV，而不是複製的問題，我在Chrome的without格：

setTimeout(function() { 
 
    var top; 
 

 
    var $without = $("#without"); 
 

 
    top = $without.css("padding-top"); 
 
    snippet.log("top = [" + top + "] (type: " + typeof top + ")"); 
 
    $without.css("padding-top", top + 100); 
 

 
    var $with = $("#with"); 
 
    top = parseInt($with.css("padding-top"), 10); 
 
    snippet.log("top = [" + top + "] (type: " + typeof top + ")"); 
 
    $with.css("padding-top", top + 100); 
 
    
 
    snippet.log("Updated"); 
 
}, 2000);

div { 
 
    padding-top: 20px; 
 
    border: 1px solid #888; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="without">We'll update this div without <code>parseInt</code></div> 
 
<div id="with">We'll update this div with <code>parseInt</code></div> 
 
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

我有些吃驚「20px100 「最後是一個非常大的墊，但...

來源

2014-11-14 15:43:16

+1我也在考慮這個......堅實的答案。 – Tomanow 2014-11-14 15:44:31

這就是謝謝你，當我讓我接受答案時。 – DesignSubway 2014-11-14 15:47:39

outerHeight包括頂部，底部填充和邊框。

來源

2014-11-14 15:44:04 Konstantinos

這將有助於包括爲什麼這個答案適用於用戶的情況。 – 2014-11-14 16:13:18

您可以在變量存儲在全球範圍內，然後保護它免受遞增，像這樣：

var originalPad; 
var ranOnce = false; 
function GrowPadding() { 
    var headH = $('#header').outerHeight(); 
    if(!ranOnce) { 
     mastPad = parseInt($('#masthead').css('padding-top'), 10); 
     ranOnce = true; 
    } 
    $('#masthead').css('padding-top', mastPad + headH); 
}

來源

2014-11-14 15:44:08

JQuery添加填充到原始填充

回答

相關問題