javascript更改自定义css样式的字体大小?
我已经看到了如何使用 javascript 替换内联样式的示例,但我找不到如何在标题中的非内联自定义样式中替换字体大小等属性。例如,我想使用 javascript 使用 javascript 将字体大小从 12px 更改为 20px。
<head>
<style>
.mystyle{
font-size:12px;
}
</style>
这是代码:
目录:
<p class="mystyle">This is some text.</p>
JavaScript:
window.onload=function(){
document.getElementsByClassName("mystyle")[0].style.fontSize="120%";
}
您还可以将字体大小设置为 smaller
、larger
、 length
单位,还可以继承父元素的字体大小。
document.getElementsByClassName('CLASSNAME')
给你一个包含所有类元素的数组,你可以使用循环来改变每个节点的样式,你可以像使用[]的普通数组一样访问它们。我不确定是否有更舒适的方法
这将允许您设置对象的字体大小。
Object.style.fontSize="value|inherit"
因此,例如,如果您在此页面上打开控制台并运行:
document.getElementsByTagName('h1')[0].style.fontSize = '35px'
您将看到此页面的标题增加。
为了更改style
元素中指定的样式表,您可以修改元素内容:
s = document.getElementsByTagName('style')[0];
s.innerHTML += '.mystyle { font-size: 20px; }';
这不会更改现有规则,但会附加覆盖该规则的规则。
或者,可以使用 CSSOM 中定义的style
元素的 sheet
属性:
var sh = document.getElementsByTagName('style')[0].sheet;
sh.insertRule('.mystyle { font-size: 20px; }', sh.cssRules.length);
如果您真的想替换 style
元素中的规则而不仅仅是覆盖它,则需要找到它,遍历 cssRules
对象并获取索引,然后调用 deleteRule
然后insertRule
。