Question

如何使用javascript更改自定义CSS样式的字体大小？

我已经看过如何使用javascript替换内联样式的示例，但我找不到如何在标头中以非内联自定义样式替换font-size这样的属性。例如，我想使用javascript使用javascript从12px 20px更改字体大小。

<head>
<style>
.mystyle{
font-size:12px;
}
</style>

Answer 1

以下是代码：

的HTML ：

<p class="mystyle">This is some text.</p>

的javascript ：

window.onload=function(){
document.getElementsByClassName("mystyle")[0].style.fontSize="120%";
}

您还可以将{字体大小设置为smaller，larger，以length为单位，并继承父元素的字体大小。

Answer 2

document.getElementsByClassName('CLASSNAME')

为您提供了一个包含所有类元素的数组，您可以使用循环来更改每个节点样式，您可以像使用[]的常规数组一样访问它们。我不确定是否有更舒适的方式

Answer 3

这将允许您设置对象的字体大小。

Object.style.fontSize="value|inherit"

因此，例如，如果您在此页面上打开控制台并运行：

document.getElementsByTagName('h1')[0].style.fontSize = '35px'

您会看到此页面的标题增加。

Answer 4

要更改style元素中指定的样式表，您可以修改元素内容：

s = document.getElementsByTagName('style')[0];
s.innerHTML += '.mystyle { font-size: 20px; }';

这不会更改现有规则，但会附加一个覆盖它的规则。

或者，您可以使用CSSOM中定义的sheet元素的style属性：

var sh = document.getElementsByTagName('style')[0].sheet;
sh.insertRule('.mystyle { font-size: 20px; }', sh.cssRules.length);

如果您真的想要替换 style元素中的规则而不是仅覆盖它，则需要找到它，遍历cssRules对象并获取索引，然后调用deleteRule然后调用insertRule。