css - 如何像我们在 Javascript 中那样(真正地)将参数传递给 CSS 类？

Question

我想知道是否有办法将 REAL 参数传递给 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)">

目的是为所有可以在对象本身中给出“宽度”的对象创建一个类，但我找不到正确的语法来使它永远有效。

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

<style>
    .clWidth5  { width:  5px; }
    .clWidth10 { width: 10px; }
    .clWidth15 { width: 15px; }
<style>

我知道 CSS 不是一种“编程语言”(至少就我所知而言还不是)，但我真的很想以更好的方式编写我的代码，使用一个带有真实参数的 CSS 类。

如果有办法，请向我解释要使用的正确语法，否则请确认它尚不受支持。

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

Answer 1

没有办法做你正在寻找的...另外，你想要的不是编写 css 的正确方法:css 是一种静态语言，所有需要动态的都应该在 javascript 中实现.

为了实现这一点，但静态地是使用css 预处理器，如sass :
@each $width in (5, 10, 15, 20) {
.clWidth-#{$width} { 宽度:#{$width}px; }
}