jqueryマージン加算クラスを作成

Question

jqueryで任意の数のマージンを追加する方法を探しています。それはのようなものでなければなりません ：

<div class="mr5">Add this text margin-right = 5px</div> 
<div class="ml15">Add this text margin-left = 15px</div> 
<div class="mt6">Add this text margin-top = 6px</div> 
<div class="mb4">Add this text margin-bottom = 4px</div> 

と等...

<div class="m4">Add this text margin = 4px</div> 
<div class="p4">Add this text padding = 4px</div> 
... 

は、それがこれを行うにはjqueryのコードを作成することは可能ですか？ たぶん、パッディングのためにやることがあります。

アイデア：フォントサイズを追加するfs18で自動パディング、マージン、あるいはfont-sizeを追加するように、それは、あまりにもブートストラップに使用することができます：18px

おかげ

Answer 1

これはオプションです。それはあまりにも詰め物で動作します。

'start with'クラスとあなたが適用したいCSSに渡します。

正規表現を使用して値を適用し、cssを適用して適用します。

function addCss(startClass, css) { 
 
    $('[class^="' + startClass + '"]').each(function() { 
 
    var px, reg = new RegExp(startClass + "(\\d+)", 'g'); 
 
    if ((px = reg.exec(this.className)) != null) { 
 
     $(this).css(css, px[1] + 'px'); 
 
    } 
 
    }); 
 
} 
 

 
addCss('mr', 'margin-right'); 
 
addCss('ml', 'margin-left'); 
 
addCss('mt', 'margin-top'); 
 
addCss('mb', 'margin-bottom'); 
 

 
//addCss('pl', 'padding-left');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="mr5">Add this text margin-right = 5px</div> 
 
<div class="ml15">Add this text margin-left = 15px</div> 
 
<div class="mt6">Add this text margin-top = 6px</div> 
 
<div class="mb4">Add this text margin-bottom = 4px</div> 
 
<div class="mb40">Add this text margin-bottom = 4px</div> 
 
<div class="mb4">Add this text margin-bottom = 4px</div> 
 
<div class="mb400">Add this text margin-bottom = 4px</div> 
 
<div class="mb4">Add this text margin-bottom = 4px</div>

Answer 2

はこれを試してください：

$("div").each(function(){ 
     var _thiss = $(this); 
     var div_class = $(this).attr("class"); 
     var margin = div_class.split("_"); 

     if(margin[0] == "mr"){ 
     $(_thiss).css({"margin-right":margin[1]+"px"}); 
     } 
     if(margin[0] == "ml"){ 
     $(_thiss).css({"margin-left":margin[1]+"px"}); 
     } 
    }); 

Answer 3

$(".mr5").css("margin-right", "5px"); 
$(".ml15").css("margin-right", "15px"); 
$(".mt6").css("margin-right", "6px"); 
$(".mb4").css("margin-right", "4px"); 

これをページローダーに追加しますか？