Heim > Artikel > Web-Frontend > 字体大小_html/css_WEB-ITnose
字体大小_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:03:041250Durchsuche
通过改变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的什么就可以改变字体的大小请问这种写法要怎么写？？
不建议直接改body,改body容易问题，所有字体都会变成同一个大小。等明天写个实例给你。
“Ems”: em，大小不固定 ,成为相对单位（body则相对浏览器的默认字体设置，子集相对父级）， 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展，2em = 32px , 目前常用的字体大小px换算成em , 他们把字体大小用em 来表示，通过改变bodyd的什么就可以改变字体的大小请问这种写法要怎么写？？
不建议直接改body,改body容易问题，所有字体都会变成同一个大小。等明天写个实例给你。
谢谢!
我需要的效果是通过点击A的大小,来改变所有页面字体的大小
如果字体大小是可以改变的,我就用em表示,如果是固定大小的就有px写死
$("html").css("font-size","12px");
123
1倍 12px 456
2倍 24px
<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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何修改iframe里面元素的css样式，不跨域_html/css_WEB-ITnoseNächster Artikel：用css实现输入和选择效果,但IE11发现没有效果,select挡住了input框_html/css_WEB-ITnose