根据变量设置一些CSS属性

Question

我想添加一个变量到一个CSS类。它是否可行？我的意思是我想要做的东西像下面这样：

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

（例如：它的名字“box10”应该得到10px的的填充DIV）

我理解这未必是正确的语法，但我希望你能帮助我实现将我的类的属性设置为可变值的概念。

Answer 1

这是目前无法CSS中使用的变量，但也有一些其他可用选项。

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

• 您可以使用JavaScript将填充添加到框中，但在逻辑中包含演示文稿并不明智。在jQuery中，一个循环做到这一点看起来像（假设你的箱子是）：

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

• 你可以使用一个预处理器工具，如少设置你的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";