如何將參數（真實的）傳遞給像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)"> 

的purpouse是有一個單個類可以在對象本身中給出「寬度」的所有對象，但我無法找到正確的語法來使用此功能。

我已經使用了多類的定義，但我真的是因爲它不是一個「編程」的方式不喜歡這種方法：

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

我知道CSS是不是一個「編程語言」 （至少不是我所知道的），但我真的很想用更好的方式編寫我的代碼，使用一個使用真實參數的CSS類。

如果有方法，請解釋我使用的正確語法，或者只是確認它還不被支持。

非常感謝您給我提供的任何幫助，以改善我的編碼。

Answer 1

有沒有辦法做你想找的東西......另外，你想要的不是正確的方式來編寫CSS：CSS是一種靜態語言，所有需要動態的應該實現JavaScript的。

爲了實現這一目標，但靜態，是使用css preprocessor像sass： @each $width in (5, 10, 15, 20) { .clWidth-#{$width} { width: #{$width}px; } }

Answer 2

有沒有辦法從HTML採取的參數和在CSS中使用它們。 但是，你可以簡單地使用像sass或更少的css擴展語言來編寫你的css代碼。

對於您給出的示例，您可以編寫sass/scss代碼來簡化代碼。

SCSS代碼：

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

這將編譯到CSS爲： CSS代碼：

.clWidth5 { 
    width: 5px; 
} 

.clWidth10 { 
    width: 10px; 
} 

.clWidth15 { 
    width: 15px; 
}