Question

我需要在我的html代码中创建不定的div，并且它们之间只有一个特征（例如大小）不同。

所以，我现在正在做的是使用许多css类，每个类都有我需要的每个div的大小，以及一个包含div其余部分样式的类，声明为<div class="class1 class2"></div>。< / p>

我正在寻找一种方法来将变量合并到我的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，而不必为每个创建一个类。有没有办法只通过CSS和HTML实现这个目标？！如果没有，有什么可以帮助我用jq或js获得这个？

先谢谢你们，伙计们！

Answer 1

如果你真的只需要不同的大小或其他简单的css差异，那么为所有生成的div创建一个master-class，并在Javascript（或后端）中设置该class +内联样式，其中单个属性不同

...以这样结束HTML：

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

通过这种方式，您可以在JS（或后端）中完成所有工作，并且您的标记仍然相当简单。

Answer 2

使用常规的旧CSS，你不能这样做。你应该考虑SASS或LESS，如果你想开始进入CSS变量和这样的函数（以及其他一些整洁的东西）。

你可以使用jQuery内联它，如果你觉得自己很好地内联你的CSS并使用JS它。它不是很好但是做的工作。：

<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'
    });
});

虽然这可能过度，但您可以在此时手动内联它们。

Answer 3

你也可以尝试这样丑陋的东西：

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>

在声明css类或html div时使用变量

3 个答案: