Question

我正在研究一个有几个不同填充的小桌子，我必须将它们放入div中以使其工作。

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

这是否可以使用CSS，或者是否需要使用JavaScript才能使其正常工作？

谢谢！

Answer 1

您需要JavaScript才能执行此操作。

解析Document以获取所有节点，并为每个节点获取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>

注意：

我假设您将拥有尊重此格式的所有classNames：


填充侧值

填充顶-30

填充左-10

使用classname生成样式属性

1 个答案: