Question

我创建了一个效果很好的代码：https://jsfiddle.net/f8vzkueh/

<div class="box" data-padding="20">Padding</div>

和

$('*').each(function() {
  var p_all = $(this).data("padding");
  $(this).css('padding', p_all);
});

现在，我的问题是：是否可以通过多个数据属性值添加元素填充？

例如（仅限顶部和底部）：

<div class="box" data-padding="20 0 20 0">Padding</div>

......或（仅限左右）：

<div class="box" data-padding="0 20 0 20">Padding</div>

感谢。：）

Answer 1

您只需要split()您的属性值和voilà！

PS：我还将循环限制为具有属性data-padding的元素。

$('[data-padding]').each(function() {
  var p_all = $(this).data("padding");
  var current_padding = p_all.split(' ');
  
  var finalPadding = '';
  for(var i = 0; i<current_padding.length;i++){
    finalPadding += current_padding[i] + 'px ';
  }
  $(this).css('padding', finalPadding);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-padding="20 0 20 0">Padding</div>

Answer 2

CSS padding规则允许您输入1,2,3或4个值。如果您使用1个值，它将应用于所有方面。如果是2个值，则第一个用于上/下，第二个用于左/右。如果是3，则第一个用于顶部，第二个用于右侧和左侧，第三个用于底部。如果是4，则每个侧面分别指向顶部，右侧，底部，左侧。

考虑到这一点，您需要做的就是修改您的data属性以包含单位，例如。 20px 0。您还可以为css()方法提供函数，以避免显式each()循环：

＆＃13;

$('.box').css('padding', function() {
  return $(this).data('padding');
});

＆＃13;

.box { border: 1px solid #c00; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-padding="20px">20 Padding</div>
<div class="box" data-padding="20px 0">20 0 Padding</div>
<div class="box" data-padding="20px 0 50px">20 0 50 Padding</div>
<div class="box" data-padding="20px 10px 5px 15px">20 10 5 15 Padding</div>

＆＃13;

请注意，我使用特定的选择器来检索元素。使用通配符*选择器可能会导致性能问题，因此我建议您尽可能避免使用它。

通过多个数据属性值添加元素填充？

2 个答案: