使用类名生成样式属性答案

【问题标题】：Use classname to generate style properties使用类名生成样式属性
【发布时间】：2015-10-14 17:53:56
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

您可以使用脚本通过解析类名、创建规则并将其添加到文档的样式表之一来完成。你试过什么？
没有你的 html 和 css 就不可能开始。我可以告诉你一些可行的方法，但我不知道你的代码/html 是什么样的
请输入您的代码以获得详细答案。没有代码，没有答案。
我不认为这可以用普通的CSS来完成，但也许LESS可以做到。
仅靠 CSS 无法实现您想要的。也就是说，在命名最佳实践方面，在 CSS 中使用多个类的替代方案也是错误的。例如，如果您想更改其中一个或多个类的填充，则类名将不再与它的作用内联，这就是为什么类名理想地引用它们所针对的元素或一般行为的原因。例如，您可以定义名称为“padding-top-big”、“padding-top-small”、“padding-bottom-medium”的类。在那里您可以放置适当的大小并在之后更改它仍然保持名称逻辑

标签： javascript html css classname

【解决方案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-top-30

padding-left-10

【讨论】：

不完全是我使用的命名约定，我可以改变它。感谢帮助。这正是我想要的。
太好了，很高兴它有帮助，是的，您可以相应地更改它。