使用类名生成样式属性

Question

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

但我目前有很多 classes 仅包含 padding: Xpx;，其中 X 对应于 classname padding-20。我想在我的 CSS 中只有一个 class，它可以通过它的 classname.

自动分配正确的填充量

这对 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

使用类名生成样式属性

Use classname to generate style properties

html

javascript

css

classname