jQuery 如何使用jQuery将当前外边距以一定数字增加/减少

在本文中，我们将介绍如何使用jQuery在当前元素的外边距上增加或减少指定的数量。外边距是指元素边缘与邻近元素之间的距离，可以通过修改元素的CSS样式来实现增加或减少。

增加外边距

使用jQuery可以通过以下方法来增加当前元素的外边距：

$(selector).css("margin", "+=10px");

上述代码中，我们使用了CSS属性选择器来获取要操作的元素。selector可以是元素的ID名、类名、标签名等。然后，使用.css()方法来修改该元素的外边距样式。在这里，我们使用了"margin"作为属性名，并将其值设置为"+=10px"。这样就可以将当前元素的外边距增加10个像素。

以下是一个示例，通过点击按钮可以使一个<div>元素的外边距每次增加10个像素：

<button id="increase-margin">增加外边距</button>
<div id="my-element" style="width: 200px; height: 200px; background-color: yellow;"></div>

<script>
 $(document).ready(function(){$ ("#increase-margin").click(function(){
        $("#my-element").css("margin", "+=10px");
    });
});
</script>

在上述示例中，当点击按钮时，id为my-element的<div>元素的外边距会每次增加10个像素。

减少外边距

类似地，可以使用以下方法来减少当前元素的外边距：

$(selector).css("margin", "-=10px");

与增加外边距的方法类似，我们只需将属性值改为"-=10px"，即可将当前元素的外边距减少10个像素。

以下是一个示例，通过点击按钮可以使一个<div>元素的外边距每次减少10个像素：

<button id="decrease-margin">减少外边距</button>
<div id="my-element" style="width: 200px; height: 200px; background-color: yellow;"></div>

<script>
 $(document).ready(function(){$ ("#decrease-margin").click(function(){
        $("#my-element").css("margin", "-=10px");
    });
});
</script>

在上述示例中，当点击按钮时，id为my-element的<div>元素的外边距会每次减少10个像素。