JQuery 在原始填充中添加填充

JQuery add padding to original padding

本文关键字：填充 添加 原始 JQuery      更新时间：2023-09-26

这可能很简单，但我无法弄清楚。我想使用 jquery 将填充顶部添加到div 中，以及它的原始填充顶部。到目前为止，我的代码是：

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

我认为这会导致大量的填充，因为 JQuery 不断增加填充。我需要找到一种方法来抓住原来的填充顶部，然后添加到它上面。

谢谢

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

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

您可以将该变量存储在全局上下文中，然后防止其递增，如下所示：

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);
}
相关文章：