聲明css類或html div時使用變量

我需要在我的html代碼中創建不確定的div，並且它們僅在一個特徵（例如大小）上彼此不同。聲明css類或html div時使用變量

所以，我現在正在做的是使用許多css類，每個類都需要每個div的大小，另一個類包含我的div風格的其餘部分，聲明它爲<div class="class1 class2"></div>。

我正在尋找一種方法，將一個變量在我的CSS和HTML，以避免大量的類的聲明，從而可以在代碼中直接更改大小，作爲一個例子：

CSS 
html { ... } 
.name { 
... 
content: ...; 
font: ...; 
border: ...; 
} 

.name_($var) { 
... 
height: ($var); 
width: ($var); 
} 

HTML  
<div class="name name_10"></div> //div 1 size is 10px 10px 
<div class="name name_20"></div> //div 2 size is 20px 20px 
<div class="name name_50"></div> //div 3 size is 50px 50px 
<div class="name name_80"></div> //div 4 size is 80px 80px

這樣，我就可以擁有儘可能多的div，並且不需要爲每個div創建一個類。有沒有什麼辦法只能通過CSS和HTML來實現這一點？如果沒有，有什麼可以幫我用jq或js獲得這個？

先謝謝你們，夥計們！

來源

2015-07-19 Vinicius Silveira

如果您真的只需要不同的尺寸或其他簡單的CSS差異，那麼爲您生成的所有div創建一個主類，並在Javascript（或後端）中使用單個屬性設置該類+內聯樣式不同。

...用HTML這樣的結局：

<div class="name" style="height:10px"></div> 
<div class="name" style="height:20px"></div>

這樣，你可以做JS（在後臺或）所有的工作，你的標記仍然是相當簡單的。

來源

2015-07-19 08:31:57

對於普通的舊CSS，你不能這樣做。你應該看看SASS或LESS如果你想開始進入這樣的CSS變量和函數（加上其他一些整潔的東西）。

如果你覺得舒服地內聯你的CSS並使用JS，你可以用jQuery內聯它。這不是很好，但是可以完成這項工作。：

<div class="name name_10"></div> 
<div class="name name_20"></div>

的jQuery：

$('.name').each(function(){ 
    var $this = $(this), 
     size = $this.attr('class').split('_')[1]; // Split the number from the class 

    $this.css({ 
     'width' : size + 'px', 
     'height' : size + 'px' 
    }); 
});

雖然這可能是矯枉過正，你可以只在此時進行手動內聯它們。

來源

2015-07-19 08:32:46

你也可以嘗試一些醜陋這樣的：

function addCSS(name, css) { 
 
    var style = document.getElementById("css"); 
 
    style.innerHTML += (name + " {" + css + "}"); 
 
} 
 

 
var size = 20; 
 
addCSS(".div1", "background:red; font-size:" + size + "pt;");

<style id="css"></style> 
 

 
<div class="div1">div</div>

來源

2015-07-19 08:35:04

聲明css類或html div時使用變量

回答

相關問題