如何更改自定義CSS樣式的字體大小？

如何使用javascript更改自定義css樣式的字體大小？如何更改自定義CSS樣式的字體大小？

我見過如何使用javascript替換內聯樣式的示例，但我無法找到如何在標頭中的非內聯自定義樣式中替換字體大小等屬性。例如，我想使用JavaScript來改變從12px 20px使用JavaScript的字體大小。

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

2013-10-25 techdog

這裏是代碼：

HTML：

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

的JavaScript：

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

你也可以將字體大小設置爲smaller,larger，在length單位，也繼承父元素的字體大小。

2013-10-25 07:07:16

這可能會產生所需的效果，但它不會去做所要求的問題：它不會替換'style'元素中的任何內容，它只會引入一些覆蓋其效果的規則。 –

document.getElementsByClassName('CLASSNAME')

爲您提供了所有的類元素的數組，你可以使用一個循環來改變每個節點的風格，你可以像通常的陣列[]訪問它們。我不知道是否有一個更舒適的方式

2013-10-25 07:07:14

這將允許您設置對象的字體大小。

Object.style.fontSize="value|inherit"

因此，舉例來說，如果您在本頁面打開控制檯，然後運行：

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

你會看到這個頁面增加標題。

2013-10-25 07:08:25 nmynarcik

爲了改變在style元素指定的樣式表，您可以修改元素含量：

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

這不會改變現有的規則，但附加一個覆蓋它。

或者，您可以使用style元素的sheet財產在CSSOM定義：

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

如果你真的想取代在style元素的規則，而不只是覆蓋它，你會需要找到它，遍歷cssRules對象並獲得索引，然後調用deleteRule，然後調用insertRule。

2013-10-25 09:23:57

回答