创建一个jquery Margin加法器类

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代码来执行此操作？ 也许这样做是为了填充。

想法：它也可以在Bootstrap中使用，比如使用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");

将此添加到页面加载器或您希望的位置？