Creare una classe di adescamento del margine jquery

Sto cercando un modo per aggiungere margine con qualsiasi numero con jquery. Dovrebbe essere qualcosa di simile:Creare una classe di adescamento del margine 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>

ed ecc ...

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

E 'possibile creare il codice jQuery per fare questo? Forse lo fai per il riempimento.

Idea: può utilizzato in Bootstrap anche, come aggiungere padding automatica, il margine o addirittura font-size con fs18 di aggiungere font-size: 18px

Grazie

fonte

2016-02-15 Joseph Razor

Cosa succede ad usare jQuery 'css()' per esempio '$ ("MR5 "). Css (" margin-right ":" 5px").'? Vedi http://www.w3schools.com/jquery/jquery_css.asp. –

Grazie Mirabilis Ma, voglio solo creare un codice automatico per aggiungere qualsiasi margine con qualsiasi numero ... –

Non sono sicuro di cosa intendi. Elaborare? –

Questa è un'opzione. Funzionerà anche con il padding.

passare la classe 'start with' e il css che si desidera applicare.

quindi utilizzerà regex per ottenere il valore da applicare e css per applicarlo.

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>

fonte

2016-02-15 07:58:07 BenG

Ricevo questo errore: TypeError: (valore intermedio) .exec (...) è nullo –

vedi [this] (http: // stackoverflow. com/domande/10167323/regexp-exec-rendimenti-null-quando-chiamate-volte-in-firefox). Ho aggiornato la risposta per dividere la regex. – BenG

Buon lavoro ...... – javidrathod

Si prega di provare questo:

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

fonte

2016-02-15 07:48:06 javidrathod

Aggiungi le tue classi scrivendo css di conseguenza e piccoli cambiamenti di classe in 'mr_5, ml_15' etc – javidrathod

Grazie Caro Javed, fammi provare ... –

e questo è in modo dinamico per ottenere i tuoi margini. per favore controlla questo: 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");

Aggiungi questo alla pagina loader o dove vuoi?

fonte

2016-02-15 07:48:13 Prabhakaran

Creare una classe di adescamento del margine jquery

risposta

Problemi correlati