0

JavaScriptを使用してカスタムCSSスタイルのフォントサイズを変更するにはどうすればよいですか?

JavaScript を使用してインライン スタイルを置き換える方法の例を見てきましたが、ヘッダーの非インライン カスタム スタイルで font-size などの属性を置き換える方法が見つかりません。たとえば、javascript を使用して font-size を 12px から 20px に変更したいと思います。

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

4

4 に答える 4

2

コードは次のとおりです。

html :

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

JavaScript :

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

fontsize をsmaller、larger、length単位で設定したり、親要素の font-size を継承したりすることもできます。

于 2013-10-25T07:07:16.190 に答える
1 
document.getElementsByClassName('CLASSNAME')

すべてのクラス要素を含む配列を提供します。ループを使用してすべてのノードのスタイルを変更できます。[] を使用して通常の配列のようにアクセスできます。もっと快適な方法があるかどうかはわかりません

于 2013-10-25T07:07:14.403 に答える
0

要素で指定されたスタイル シートを変更するために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場所を特定する必要があります。cssRulesdeleteRuleinsertRule

于 2013-10-25T09:23:57.900 に答える
0

これにより、オブジェクトのフォントサイズを設定できます。

Object.style.fontSize="value|inherit"

たとえば、このページでコンソールを開いて実行すると、次のようになります。

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

このページのヘッダーが増加します。

于 2013-10-25T07:08:25.930 に答える