字体大小_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

字体大小_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:03 AM

字体大小

通过改变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>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。