如何像在Javascript中那样将参数（实际）传递给CSS类？

我想知道是否有一种方法可以将实际参数传递给CSS类（就像我们对Javascript所做的那样），例如：

在Javascript中，我们使用以下方式编写：

<script language="javascript">
function clWidth(wdt) {
    document.getElementById('cell').style.width = wdt;
}
</script language="javascript">

输入HTML对象

input type=“text”id=“cell”

将具有给定的宽度

现在，为了以同样的方式使用CSS类，我将尝试以下方法：

<style>
.clWidth(wdt) {
    width: wdt;
}

</style>

我的HTML对象：

<input type="text" class="clWidth(5)">
<input type="text" class="clWidth(10)">
<input type="text" class="clWidth(5)">
<input type="text" class="clWidth(15)">

这样做的目的是为所有对象提供一个单独的类，该类的“宽度”可以在对象本身中给定，但我找不到正确的语法来使用它

我已经在使用多类定义，但我真的不喜欢这种方法，因为它不是一种“编程”方式：

我知道CSS不是一种“编程语言”（至少据我所知，目前还不是），但我真的很想用一种更好的方式编写代码，使用一个CSS类处理实际参数

如果有办法，请向我解释正确的语法，否则请确认它还不受支持

---

感谢您为我改进编码所提供的任何帮助。

没有办法完成您想要的任务。。。另外，您想要的不是正确的css编写方式：css是一种静态语言，所有需要动态的东西都应该用javascript实现

为了实现这一点，但静态地使用

css预处理器，如：

@每个$width（5,10,15,20）{
.clWidth-#{$width}{width:#{$width}px；}
}
无法从html获取参数并在css中使用它们。
但是，您可以通过使用诸如sass或更少的css扩展语言来编写css代码

对于您给出的示例，您可以编写sass/scss代码来简化代码

SCSS代码：

@each $width in (5, 10, 15) {
  .clWidth#{$width} {
    width: #{$width}px; 
  }
}

.clWidth5 {
  width: 5px;
}

.clWidth10 {
  width: 10px;
}

.clWidth15 {
  width: 15px;
}

这将在css中编译为：
CSS代码：

.clWidth5 {
  width: 5px;
}

.clWidth10 {
  width: 10px;
}

.clWidth15 {
  width: 15px;
}

您不能将真实的动态变量传递给css，但可以使用SCS创建变量。但是，它仍然是静态的，您必须单独定义每个类。你可以尝试CSSNext，使用一些允许动态变量的新语法，但我不确定这是否是你想要的。在纯CSS中有一个自定义的介词。它们在浏览器中的支持度很低，而且非常有限，它们不是变量。如果你想要真正的变量，你可以使用介词：SASS，Stylus，LESS…我不打算复制你的答案@Hitmands。当我开始回答时，这篇文章甚至没有答案。现在回想起来，我发现答案是相似的，我同意，但这是一个巧合，我笑着自己发现了这样一个巧合。