全体のページ内容のテキストのフォントサイズを変更する

javascript/cssで、すべてのラベル、見出し、段落などのテキストサイズを1回のクリックで変更でき、明示的に要素のIDを取得してからフォントを変更することはできませんサイズ。全体のページ内容のテキストのフォントサイズを変更する

私が今やっていることは、要素のIDをjavascriptで取得し、そのフォントサイズを明示的に変更することです。 bodyタグにIDを追加して、先に行くと、それを変更私はこのlinkをチェックをしています何の鮮明な画像を取得したり、次のコード

<script type="text/javascript"> 
function changemysize(myvalue) { 
    var div = document.getElementById("mymain"); 
    div.style.fontSize = myvalue + "px"; 
} 
</script>

HTMLコード

Choose a text size: 
<font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font> 
<font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font> 
<font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font> 
<div id="mymain"> 
Only this text gets affected 
</div>

出典

2013-05-09 awais

を確認するには、フォントサイズですJavaScriptを使ってこれにより、Webページ内のすべての要素のフォントサイズが変更されます。それはそれほど簡単です！

出典

2013-05-09 11:45:36 akash4eva

または単に身体 –

ID身体への不要のスタイルを設定するには、単に 'document.body'を使用しています。 –

フォントサイズの設定方法としてemsを使用することをおすすめします。こうすることで、1つのタグを使用して、特定のサイズを指定する代わりに、すべての要素のフォントサイズを（比較的）に調整することができます。例：

body { 
    font-size: 1em; 
} 

h1 { 
    font-size: 1.5em; 
} 

h2 { 
    font-size: 1.3em; 
} 

p.large { 
    font-size: 1.2em; 
}

は、その後、あなたはすべての要素それぞれのフォントサイズを拡大縮小ますので

body.enlarged { font-size: 1.3em; }

のように、ボディにクラスを適用することができます。ここ

document.body.classList.add('enlarged');

デモ：http://jsfiddle.net/bW9fM/1/

出典

2013-05-09 11:52:02

jqueryとjsを混ぜるのはなぜですか？ –

@BramVanroyデモでハンドラをバインドするためにjQueryが使用されています。それは質問の一部ではありません。彼はjQueryのタグを付けられていないため、jQueryの '.addClass（）'は使用しませんでした。ライブラリを使用しても、生のJSを使用することはできません。それがあなたの人生を良くするならば、ここには[pure js版]（http://jsfiddle.net/bW9fM/1/）と[jQuery版]（http://jsfiddle.net/bW9fM/2/）があります。 –

あなたはremを使用することができ、emカスケードとremにはないので、いくつかの場所でemよりも優れているjavascriptのコードは次のようなものになるだろう。

すべての長さがremで指定されている場合は、<html>要素のfont-sizeを変更してサイズを調整できます。

も参照してください：http://snook.ca/archives/html_and_css/font-size-with-rem

出典

2013-05-09 12:00:35 Tezcat

非常に便利なヒント！「ems」は祝福と呪いの両方になる可能性があるので、それにはIE9 plusが必要です。古いIEを気にしなければ、おそらく 'rem'を使うでしょう。 –

が私の仕事：

function changeFont(element){ 
    element.setAttribute("style",element.getAttribute("style")+";font-family: Courier New"); 
    for(var i=0; i&lt;element.children.length; i++){ 
     changeFont(element.children[i]); 
    } 
} 
changeFont(document.getElementsByTagName("body")[0]);

出典

2017-11-16 01:20:26

全体のページ内容のテキストのフォントサイズを変更する

答えて

関連する問題