创建一个 jquery 边距加法器 class

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 中，比如添加自动填充，边距甚至 font-size 和 fs18 来添加字体-尺寸：18px

谢谢

Answer 1

请试试这个：

$("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 2

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

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

Answer 3

这是一个选项。它也适用于填充。

填写'start with'class和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>

创建一个 jquery 边距加法器 class

Create a jquery Margin adder class

html

css

jquery

automation

margin