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部分。）

这是一个自包含的示例，在我的Chrome上使用with div复制问题，而不是without div：

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”最终成为一个非常大的垫子，但是...

Answer 2

outerHeight包括顶部，底部填充和边框。

Answer 3

您可以将该变量存储在全局上下文中，然后保护它不会递增，如下所示：

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

JQuery将填充添加到原始填充

3 个答案: