根据变量设置一些css属性

Question

我想在css类中添加一个变量。可能吗？我的意思是我想做类似以下的事情：

#box[i]
{
   padding: [i]px;
}

（例如：名为“box10”的div应该填充10px。）

我知道这可能不是正确的语法，但我希望你能帮助我实现将我的类属性设置为变量值的概念。

Answer 1

目前无法在CSS中使用变量，但是还有许多其他选项可用。

• 最简单的选择是为每个盒子ID创建一个CSS样式。

• 您可以使用JavaScript在框中添加填充，但在逻辑中包含表示是不明智的。在jQuery中，执行此操作的循环看起来像（假设您的框是）：

  $('div[id^=box]').each(function() {
      $(this).css('padding',this.id.substr(3)+'px');
  });
  

• 您可以使用预处理器工具（例如LESS）在CSS中设置变量;但你仍然需要指定每个选择器。

根据不同的盒子ID值设置填充似乎是个奇怪的问题。您可能需要了解构建此页面的方法是否正确。不要忘记页面上的每个ID都应该是唯一的。如果您希望在多个元素上使用相同的ID，则应使用CSS类。

如果您尝试根据大量结果创建一个大小的框（例如轮询结果），那么使用style属性并在每个元素上设置宽度/填充更容易，而不是创建一个ID一切可能的结果。例如：

<div style="width:10px"></div>

Answer 2

不，你不能用纯CSS做到这一点，但你可以使用less。

CSS变量此时仅在W3C draft中引入，尚未被浏览器支持。

Answer 3

你可以只使用javascript来检测“名称”，然后获取子字符串，这样你就有了这个数字。然后就这样做：

var box = document.getElementByName("box10");
box.style.padding = box.name.substr(3) + "px";