css - 在 .css 文件中动态添加值

Question

我想知道是否可以将 .css 文件中创建的类的值动态添加到标签中？

现在，如果我有<div class="textFrame">.html 文件和 css 文件，我有声明为 -

.textFrame
{ 
     overflow:hidden; 
     position:absolute;
}

现在，我想为<div>left、top、height 和 width 等属性添加样式属性。我的问题是，是否可以在 .textFrame 类（在 .css 文件中）中创建一些变量，让我们说，left、top、height 或 width，并为每个<div>标签动态地为这些变量分配值。实际上，没有<div>顶部、左侧、高度和宽度值不同的 textFrames( 标签)。

Answer 1

使用 jquery，您可以在标签中动态添加类

例如：

<div class="textFrame">
    .......
    .......
</div>

查询：

$(document).ready(function() {
     $('.textFrame').css('height','500px');
}

对于多个 div 具有相同的类，例如：

<div class="textFrame" id="1"> ....... ....... </div>
<div class="textFrame" id="2"> ....... ....... </div>

查询：

$(document).ready(function() {
$('.textFrame').each(function(e){
if($('.textFrame').attr('id') == '1'){
$('.textFrame').css('height','500px');
} else if($('.textFrame').attr('id') == '2'){
$('.textFrame').css('height','300px');
}
});

Answer 2

如果它们都具有不同的属性，那么动态更改源样式表是没有意义的。您可能应该使用 Javascript 来动态更改每个元素的样式。jQuery 使这变得非常容易。