私はうまく機能するコードを作成しました：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>
ありがとう。:)
CSSpaddingルールでは、1、2、3、または4の値を入力できます。1つの値を使用すると、すべての側面に適用されます。2つの値の場合、最初の値が上/下に使用され、2番目の値が左/右に使用されます。3の場合、最初は上に、2番目は左右に、3番目は下に使用されます。4の場合、各辺は上、右、下、左に個別に指定されます。
それを念頭に置いて、あなたがする必要があるのはdata、ユニットを含むように属性を修正することです。20px 0。css()メソッドに関数を提供して、明示的なeach()ループを回避することもできます。
$('.box').css('padding', function() {
return $(this).data('padding');
});.box { border: 1px solid #c00; }<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>特定のセレクターを使用して要素を取得したことに注意してください。ワイルドカード*セレクターを使用するとパフォーマンスの問題が発生する可能性があるため、可能な限り回避することをお勧めします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加