javascript - 使用类名生成样式属性

Question

我正在处理一个有几个不同填充的小 table ，我必须将它们放入一个 div 中才能使其工作。

但我目前有很多类仅包含 padding: Xpx;，其中 X 对应于类名 padding-20。我想在我的 CSS 中只有一个类，它可以自动通过它的类名分配正确数量的填充。

这可以通过 CSS 实现吗？还是需要 JavaScript 才能实现？

谢谢!

Answer 1

您需要 JavaScript 来执行此操作。

解析文档以获取所有节点，并为每个节点获取 className 属性以提取给定的填充值:

var all = document.getElementsByTagName("*");

for (var i = 0, max = all.length; i < max; i++) {
  var className = all[i].className;
  if (className !== '' && typeof className !== 'undefined') {
    var paddingValues = className.split('-');
    switch (paddingValues[1]) {
      case 'left':
        all[i].style.paddingLeft = paddingValues[2] + "px";
        break;
      case 'top':
        all[i].style.paddingTop = paddingValues[2] + "px";
        break;
      case 'right':
        all[i].style.paddingRight = paddingValues[2] + "px";
        break;
      case 'bottom':
        all[i].style.paddingBottom = paddingValues[2] + "px";
        break;
    }
  }

}

p,
div,
span {
  background-color: yellow;
}

<p>this a paragraph without any style</p>
<div class="padding-left-20">Blabla blabla</div>
<br>
<span class="padding-left-10">some text....</span>
<p class="padding-top-30">this a new paragraph</p>

注意:

我假设您将拥有符合这种格式的所有类名:

padding-side-value

padding-top-30

padding-left-10