如何优雅实现页面动态样式

如何优雅实现页面动态样式

场景：我有两个div，第一个div内边距30px，第二个内边距20px

img

想要实现的功能：如何写一个公共样式，可以动态接收参数，在标签里调用时直接传过来我想要的值
如：

<div class="padding(20)">div>

<style lang='less' >
.padding(e){
   padding:e + 'px'
}
style>

@list: 5, 10, 15, 20, 30;
each(@list, {
  .pd-@{value} {
    padding: @value * 1px;
  }
})

如果是根据类名动态设置样式，需要加点js代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="icon" href="" />
    <title>html</title>
    <style>
      /* 选择其 class 属性值中包含 "padding-" 子串的每个元素
     这里可以写一些此类的公共样式*/
      [class*="padding-"] {
        margin: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="padding-10 other">这里的内边距为10</div>
    <div class="padding-20 anywhere">这里的内边距为20</div>
    <div class="padding-30">这里的内边距为30</div>
    <p class="padding">这个无效</p>
    <script>
      let list = document.querySelectorAll(' [class*="padding-"]');
      list.forEach((item, index) => {
        //将当前元素的class集合转为数组并遍历
        Array.from(item.classList).forEach((item2) => {
          //找到class名包含padding-的class
          if (item2.indexOf("padding-") !== -1) {
            //将获取到的padding-10，padding-20等等，按-分割，再获取到设置的具体值，
            //值的类型为字符串，如需要可自行转换为数字。
            let paddingValue = item2.split("-")[1];
            //设置padding的值为calss（如padding-10）上对应的值
            item.style.padding = paddingValue + "px";
          }
        });
      });
    </script>
  </body>
</html>

谢谢大家的回答，已解决问题，写了一篇文章以此记录，可以来看看~
https://blog.csdn.net/ke_sin/article/details/128080144?spm=1001.2014.3001.5502