Question

我知道如何在单个标签上应用css（或更改类别），但这不是我要求的内容！

我想修改CSS类中的属性而不触及应用类的元素。

换句话说，如果这是css

.myclass {
  font-size: 14px;
  color: #aab5f0;
}

这是html

<span id="test" class="myclass"> foo bar </span>

增加span标记的字体我想要修改类的内容而不是像

那样做

var fontsize = parseInt($('#test').css('font-size').replace(/[^-\d\.]/g, ''));
fontsize += 10;
$('#test').css('font-size', fontsize+'px');

我希望课程成为

.myclass {
      font-size: 18px;
      color: #aab5f0;
    }

有没有办法通过Javascript更改实际的课程？

我的另一个解决方案是将css放入容器中并每次重新装满容器，但我感觉这不是一个好主意......

Answer 1

我认为理想情况下，您应该在html或body元素上定义基本字体大小。 CSS中的所有其他字体大小应该相对于“主”字体大小，如下所示：

body {
    font-size: 12px;
}

[everything else] {
    font-size: 1.0em;
}

然后，当您通过jQuery.css（）调整正文的字体大小时，其他元素将自动调整相对于父级的大小。

$(body).css('font-size', '14px');

您不必使用body级别，您可以将div或其他容器定义为基本字体大小，而是将其用作父级。

这项技术的工作样本here。

Answer 2

尽管如此，请看这个问题：Setting CSS pseudo-class rules from JavaScript

以相同的方式实现更改类和“设置伪类规则”。

@Box9's answer可能是你应该实际使用的那个：

我把small library for this扔到了一起，因为我确实在那里是在JS中操作样式表的有效用例。

Answer 3

无需更改类本身。要覆盖该行为，只需将另一个类添加到现有类或完全更改它。我将展示第一个选项：

.myclass {
    font-size: 14px;
    color: #aab5f0;
}
.myclass.override {
    font-size: 12px;
}

然后你需要做的就是切换覆盖类。这种方式也好得多，因为所有演示都是在CSS中完成的。

Answer 4

由于您使用jQuery很明显，请参阅addClass和removeClass函数。

$('#test').removeClass('myClass').addClass('yourClass');

Answer 5

寻找同样的事情。

这是我的解决方案

https://jsfiddle.net/sleekinteractive/0qgrz44x/2/

HTML

<p>The Ants in France stay mainly on the Plants</p>

CSS

p{
font-family:helvetica;
font-size:15px;
}

JAVASCRIPT (uses jQuery)

function overwrite_css(selector,properties){ 

// selector: String CSS Selector
// properties: Array of objects

var new_css = selector + '{';

for(i=0;i<properties.length;i++){

new_css += properties[i].prop + ':' + properties[i].value + ';';

}

new_css += '}';

$('body').append('<style>' + new_css + '</style>');

}

overwrite_css('p',Array({prop: 'font-size', value: '22px'}));
overwrite_css('p',Array({prop: 'font-size', value: '11px'}));
overwrite_css('p',Array({prop: 'font-size', value: '66px'}));

// ends on 66px after running all 3. comment out lines to see changes

Answer 6

简单JQuery：

$('#test').attr('class','bigFont');

或原生JS：

document.getElementById('test').className ='bigFont';

更新

var size = [ 10 , 20 , 30 ] ;
var i =0;
$('#test').css('font-size',size[i]+'px');
i = (i+1)%size.length ;

如何使用JavaScript修改CSS类？

6 个答案: