Utwórz jQuery Margin adder klasy

Szukam sposobu na dodanie marginesu z dowolnym numerem z jquery. To powinno być coś takiego:Utwórz jQuery Margin adder klasy

<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>

i etc ...

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

Czy możliwe jest tworzenie kodu jQuery to zrobić? Może to zrobić dla wyściółki.

Idea: można go stosować w Bootstrap też, jak dodać automatyczne dopełnienie, margines, a nawet font-size z fs18 dodać font-size: 18px

Dzięki

Źródło

2016-02-15 Joseph Razor

Co za pomocą jQuery '.css()' '$ na przykład ("MR5 "). Css (" margin-right ":" 5px").'? Zobacz http://www.w3schools.com/jquery/jquery_css.asp. –

Dzięki Mirabilis Ale, po prostu chcę utworzyć automatyczny kod, aby dodać dowolny margines z dowolnym numerem ... –

Nie jestem pewien co masz na myśli. Opracować? –

To jest opcja. Będzie działać także z paddingiem.

zaliczyć klasę "start z" i css, które chcesz zastosować.

następnie użyje wyrażeń regularnych, aby uzyskać wartość do zastosowania i css, aby ją zastosować.

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>

Źródło

2016-02-15 07:58:07 BenG

Otrzymuję ten błąd: TypeError: (wartość pośrednia) .exec (...) jest pusty –

zobacz [to] (http: // stackoverflow. com/questions/10167323/regexp-exec-zwraca-null-when-called-repeat-in-firefox). Zaktualizowałem odpowiedź, aby podzielić wyrażenie regularne. – BenG

Dobra robota ...... – javidrathod

Spróbuj tego:

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

Źródło

2016-02-15 07:48:06 javidrathod

Dodaj swoje klasy odpowiednio napisać css i małą zmianę w klasie do 'mr_5, ml_15' itd. – javidrathod

Dziękuję Drodzy Javed, pozwólcie mi spróbować ... –

i to jest dynamicznie uzyskiwać swoje marginesy. proszę sprawdzić to: 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");

Dodaj to do programu ładującego strony lub gdzie chcesz?

Źródło

2016-02-15 07:48:13 Prabhakaran

Odpowiedz

Powiązane problemy