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添加填充到原始填充

回答

相关问题