創建一個jQuery Margin加法器類

我正在尋找一種方法來用jQuery添加任意數量的margin。它應該是這樣的：創建一個jQuery Margin加法器類

<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代碼來做到這一點？也許這樣做是爲了填充。

理念：它可以在啓動時使用過，像添加自動填充，利潤率甚至與fs18font-size增加字體大小：18像素

感謝

來源

2016-02-15 Joseph Razor

怎麼樣使用jQuery'的.css（）'例如'$（「MR5 」）的CSS（「保證金權」：「爲5px」）。'？見http://www.w3schools.com/jquery/jquery_css.asp。 –

感謝Mirabilis但是，我只是想創建一個自動代碼來添加任何數字的任何保證金... –

我不知道你的意思是什麼。闡述？ –

這是一個選項。它也可以使用填充。

傳入'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>

來源

2016-02-15 07:58:07 BenG

我收到此錯誤：TypeError :(中間值）.exec（...）爲空 –

請參閱[this]（http：// stackoverflow。 COM /問題/ 10167323 /正則表達式，EXEC-回報無效時，所謂反覆復，在Firefox的）。我已經更新了分解正則表達式的答案。 – BenG

Good Work ...... – javidrathod

請試試這個：

$("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"}); 
     } 
    });

來源

2016-02-15 07:48:06 javidrathod

添加您的課程相應地寫入CSS和小班更改爲'mr_5，ml_15'等 – javidrathod

謝謝親愛的賈維德，讓我試試吧...... –

，這是動態獲得您的利潤。請檢查此：https：//jsfiddle.net/34djvdtu/6/ – javidrathod

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

添加到頁面加載器或任何你想要的？

來源

2016-02-15 07:48:13 Prabhakaran

創建一個jQuery Margin加法器類

回答

相關問題