css - 如何更改自定义 CSS 样式的字体大小？

Question

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

我已经看到了如何使用 javascript 替换内联样式的示例，但我找不到如何在标题中的非内联自定义样式中替换字体大小等属性。例如，我想使用 javascript 使用 javascript 将字体大小从 12px 更改为 20px。

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

score 2 · Accepted Answer

这是代码：

html：

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

javascript：

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

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

score 1 · Accepted Answer

document.getElementsByClassName('CLASSNAME')

给你一个包含所有类元素的数组，你可以使用循环来改变每个节点的样式，你可以像使用 [] 的普通数组一样访问它们。不知道有没有更舒服的方法

score 0 · Accepted Answer

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

Object.style.fontSize="value|inherit"

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

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

你会看到这个页面的标题增加了。

score 0 · Accepted Answer

为了改变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.

4 回答 4