フォントサイズ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

フォントサイズ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:03:04

オリジナル

1264 人が閲覧しました

A のサイズを変更して、現在のページのフォントサイズを変更するにはどうすればよいですか?

ディスカッションへの返信 (解決策)

単純な CSS ではこのタスクを完了できず、js の介入が必要です。

window.onload = function(){    var content = document.getElementById('content');    var btn = document.getElementById('btn');    var btns = btn.getElementsByTagName('button');    for(var i = 0; i < btns.length; i++){        btns[i].index = i;        btns[i].onclick = function(){            changeSize(this.index);        }    }    var arr = ['12px', '14px', '16px'];    function changeSize(n){        content.style.fontSize = arr[n];    }};

ログイン後にコピー

完全なコード:

<!doctype html><html><head>    <meta charset="UTF-8">    <title></title></head><body><div id="btn">    <button>小</button>    <button>中</button>    <button>大</button></div><div id="content">    <p>1. 健康</p>    <ul>        <li>你会精力充沛，呼吸顺畅</li>        <li>你会患上肺癌、呼吸系统疾病、心脏病</li>    </ul></div><script>    window.onload = function(){        var content = document.getElementById('content');        var btn = document.getElementById('btn');        var btns = btn.getElementsByTagName('button');        for(var i = 0; i < btns.length; i++){            btns[i].index = i;            btns[i].onclick = function(){                changeSize(this.index);            }        }        var arr = ['12px', '14px', '16px'];        function changeSize(n){            content.style.fontSize = arr[n];        }    };</script></body></html>

ログイン後にコピー

“Ems”: em，大小不固定 ,成为相对单位（body则相对浏览器的默认字体设置，子集相对父级）， 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展，2em = 32px , 目前常用的字体大小px换算成em , 他们把字体大小用em 来表示，通过改变bodyd的什么就可以改变字体的大小请问这种写法要怎么写？？

ログイン後にコピー

“Ems”: em，大小不固定 ,成为相对单位（body则相对浏览器的默认字体设置，子集相对父级）， 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展，2em = 32px , 目前常用的字体大小px换算成em , 他们把字体大小用em 来表示，通过改变bodyd的什么就可以改变字体的大小请问这种写法要怎么写？？

ログイン後にコピー

いいえ本文を直接変更することをお勧めします。すべてのフォントが同じサイズになります。明日は例を書きます。

“Ems”: em，大小不固定 ,成为相对单位（body则相对浏览器的默认字体设置，子集相对父级）， 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展，2em = 32px , 目前常用的字体大小px换算成em , 他们把字体大小用em 来表示，通过改变bodyd的什么就可以改变字体的大小请问这种写法要怎么写？？

ログイン後にコピー

ボディを直接変更することはお勧めできません。問題が発生しやすく、すべてのフォントで問題が発生します。同じ大きさになります。明日は例を書きます。

ありがとうございます!
必要な効果は、A のサイズをクリックしてすべてのページのフォントサイズを変更することです
フォントサイズを変更できる場合は、em を使用します固定サイズの場合は、px

$("html").css("font-size","12px"); で記述します。 "font-size:1rem" >123

<HTML><HEAD><TITLE>特定区域文字控制</TITLE><STYLE type=text/css>BODY { MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"}A { FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none}A:hover { FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline}A:active { FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033}.STYLE1 { font-size: 40px; font-family: "华文行楷"; color: #990000;}.STYLE2 { font-size: 30px; font-weight: bold; font-family: "黑体"; color: #0000FF;}</STYLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD><BODY bgColor=#fef4d9><BR><BR><CENTER><TABLE borderColor=#993399 border=5 borderlight="green"> <TBODY> <TR> <TD align=middle> <SCRIPT language=JavaScript>function doZoom(size){ document.getElementById('zoom').style.fontSize=size+'px'}</SCRIPT> <TABLE style="BORDER-RIGHT: #336699 1px solid; BORDER-TOP: #336699 1px solid; BORDER-LEFT: #336699 1px solid; BORDER-BOTTOM: #336699 1px solid" cellSpacing=0 width=200 align=center bgColor=#93bee2 border=0> <TBODY> <TR> <TD style="BORDER-BOTTOM: #336699 1px solid" width="83%" bgColor=#00FFFF>[<A href="javascript:doZoom(20)">大字</A> <A href="javascript:doZoom(14)">中字</A> <A href="javascript:doZoom(9)">小字</A>] <DIV></DIV></TD></TR> <TR bgColor=#ffffff> <TD id=zoom colSpan=2><div align="center">文字大小变化哦</div></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>