JQuery将填充添加到原始填充

Question

这可能很简单,但我无法弄清楚.我想使用jquery除了它的原始padding-top之外还为div添加padding-top.到目前为止我的代码是:

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

这导致我假设的大量填充,因为JQuery不断增加填充.我需要找到一种方法来抓住原始填充顶部然后添加到它.

谢谢

Answer 1

$('#masthead').css('padding-top')返回一个字符串,而不是一个数字,因此它可能headH被附加到该字符串,而不是添加到其数字值;

也许:

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

parseInt将解析它能找到的内容,然后忽略其余部分.所以"42px"变成42(而使用一元+或Number将在px部分窒息).

这是一个自包含的示例,使用withdiv而不是withoutdiv 在Chrome上复制问题:

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"最终成为一个非常大的垫,但......