Recently, I created a jQuery library for managing spacing (margin and padding).
Now, I am looking to convert this library to pure JavaScript with your assistance :)
Below is the JavaScript code snippet:
// Useful Variables
let dataAttr = "[data-m], [data-mt], [data-mr], [data-mb], [data-ml], [data-my], [data-mx], [data-p], [data-pt], [data-pr], [data-pb], [data-pl], [data-py], [data-px]";
let dataSpacing = $("[data-spacing]").find(dataAttr);
let p = "px";
// Margin
const marginSpacing = () => {
dataSpacing.each(function() {
$(this).css({
'margin': $(this).attr("data-m") + p,
'margin-top': $(this).attr("data-mt") + p,
'margin-right': $(this).attr("data-mr") + p,
'margin-bottom': $(this).attr("data-mb") + p,
'margin-left': $(this).attr("data-ml") + p,
});
});
};marginSpacing()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-spacing>
<p data-mt="20">Text</p>
<p data-mr="20">Text</p>
<p data-mb="20">Text</p>
<p data-ml="20">Text</p>
</body>