求助：将jQuery间距处理库转换为纯JavaScript实现

Here's a complete pure JavaScript implementation that replicates and enhances your original jQuery code (including support for data-my, data-mx, data-py, data-px which were selected but not handled in the original):

<body data-spacing>
  <p data-mt="20">Text with margin-top: 20px</p>
  <p data-mr="20">Text with margin-right: 20px</p>
  <p data-mb="20">Text with margin-bottom: 20px</p>
  <p data-ml="20">Text with margin-left: 20px</p>
  <p data-my="15">Text with margin-top and bottom: 15px</p>
  <p data-px="10">Text with padding-left and right: 10px</p>

  <script>
    // Define target data attributes
    const 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]";
    // Get all spacing elements inside [data-spacing] containers
    const spacingElements = document.querySelectorAll('[data-spacing] ' + dataAttr);
    const unit = 'px'; // Default unit

    function applySpacing() {
      spacingElements.forEach(element => {
        // Margin handling
        if (element.hasAttribute('data-m')) element.style.margin = `${element.getAttribute('data-m')}${unit}`;
        if (element.hasAttribute('data-mt')) element.style.marginTop = `${element.getAttribute('data-mt')}${unit}`;
        if (element.hasAttribute('data-mr')) element.style.marginRight = `${element.getAttribute('data-mr')}${unit}`;
        if (element.hasAttribute('data-mb')) element.style.marginBottom = `${element.getAttribute('data-mb')}${unit}`;
        if (element.hasAttribute('data-ml')) element.style.marginLeft = `${element.getAttribute('data-ml')}${unit}`;
        
        // Margin y (top/bottom) and x (left/right)
        if (element.hasAttribute('data-my')) {
          const value = element.getAttribute('data-my');
          element.style.marginTop = `${value}${unit}`;
          element.style.marginBottom = `${value}${unit}`;
        }
        if (element.hasAttribute('data-mx')) {
          const value = element.getAttribute('data-mx');
          element.style.marginLeft = `${value}${unit}`;
          element.style.marginRight = `${value}${unit}`;
        }

        // Padding handling
        if (element.hasAttribute('data-p')) element.style.padding = `${element.getAttribute('data-p')}${unit}`;
        if (element.hasAttribute('data-pt')) element.style.paddingTop = `${element.getAttribute('data-pt')}${unit}`;
        if (element.hasAttribute('data-pr')) element.style.paddingRight = `${element.getAttribute('data-pr')}${unit}`;
        if (element.hasAttribute('data-pb')) element.style.paddingBottom = `${element.getAttribute('data-pb')}${unit}`;
        if (element.hasAttribute('data-pl')) element.style.paddingLeft = `${element.getAttribute('data-pl')}${unit}`;
        
        // Padding y (top/bottom) and x (left/right)
        if (element.hasAttribute('data-py')) {
          const value = element.getAttribute('data-py');
          element.style.paddingTop = `${value}${unit}`;
          element.style.paddingBottom = `${value}${unit}`;
        }
        if (element.hasAttribute('data-px')) {
          const value = element.getAttribute('data-px');
          element.style.paddingLeft = `${value}${unit}`;
          element.style.paddingRight = `${value}${unit}`;
        }
      });
    }

    // Initialize the spacing
    applySpacing();
  </script>
</body>

Key Changes from jQuery to Pure JS: #

• Selector Replacement: Instead of $("[data-spacing]").find(dataAttr), we use document.querySelectorAll('[data-spacing] ' + dataAttr) to get all target elements in one efficient query.
• Element Iteration: Replaced jQuery's .each() with native forEach() on the NodeList returned by querySelectorAll.
• Attribute & Style Handling: Used element.hasAttribute() to check if the data attribute exists before applying styles (avoids invalid CSS values like nullpx), and element.getAttribute() to retrieve values. Directly set style properties via element.style.[property].
• Added Missing Logic: Implemented support for data-my, data-mx, data-py, data-px which were included in your original attribute list but not handled in the jQuery code.

Notes: #

• If you need to support dynamic elements (added after page load), you can wrap the applySpacing() call in a function that runs whenever new elements are added, or use a MutationObserver to detect DOM changes automatically.
• The unit is hardcoded to px here, but you could modify this to accept custom units via an additional data attribute (e.g., data-unit="rem") if needed.

内容的提问来源于stack exchange，提问作者WhiteWolf