js代码,用于动态改变字体大小
示例1:
& lt!文档类型
html & gt
& lthtml & gt
& lthead & gt
& lttitle & gt修改字体size.html
& lt元宇宙
http-equiv = & quot;关键词& quot
content = & quot关键字1,关键字2,关键字& quot& gt
& lt元宇宙
http-equiv = & quot;描述& quot
content = & quot这
是
我的
页面& quot& gt
& lt元宇宙
http-equiv = & quot;内容类型& quot
content = & quot文本/html;
UTF-8 & quot;& gt
& lt!-& lt;环
rel = & quot样式表& quot
type = & quottext/CSS & quot;
href = & quot。/styles . CSS & quot;& gt-& gt;
& lt风格
type = & quottext/CSS & quot;& gt
部门{
边框:1px
红色
固体;
宽度:455px
字体大小:16px
}
。最大值
字体大小:20px
}
。莫伦{
字体大小:16px
}
。最小{
字体大小:12px
}
& lt/style & gt;
& lt脚本
type = & quottext/JavaScript & quot;& gt
//这种方式减少了js和CSS之间的耦合
功能
changeFontSize(fontStyle){
//
获取节点对象
定义变量
divNode
=
document . getelementsbytagname(& quot;div & quot)[0];
//
设置节点的名称属性和属性值。
div node . class name = font size;
}
/*
功能
changeFontSize2(fontSize){
//
获取节点对象
定义变量
divNode
=
document . getelementsbytagname(& quot;div & quot)[0];
div node . style . font size = font size;
}
*/
& lt/script & gt;
& lt/head & gt;
& ltbody & gt
& lta
href = & quotJavaScript:void(0)& quot;
onclick = & quotchange font size 2(& # 39;20px & # 39)& quot
class = & quot马克斯& quot& gt大尺寸</a & gt;
& lta
href = & quotJavaScript:void(0)& quot;
onclick = & quotchange font size 2(& # 39;16px & # 39)& quot
class = & quot莫伦& quot& gt中等</a & gt;
& lta
href = & quotJavaScript:void(0)& quot;
onclick = & quotchange font size 2(& # 39;12px & # 39)& quot
class = & quotmin & quot& gt小号</a & gt;
& ltdiv & gt
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
下面是显示的文本。单击上面的超链接可更改字体大小。
& lt/div & gt;
& lt/body & gt;
& lt/html & gt;
示例2:
& lthtml & gt
& lthead & gt
& lttitle & gt设置JavaScript网页字体
& ltstyle & gt
正文{
字体大小:9pt
}
& lt/style & gt;
& lt/head & gt;
& ltbody & gt
& lt差异
id = zoom & gt这是一个示例文本。您可以单击下面来选择不同的字体大小,此文本将立即改变其大小。剧本之家。& lt/div & gt;
& lt脚本
language = JavaScript & gt
功能
doZoom(大小){
document . getelementbyid(& # 39;zoom & # 39). style . font size = size
& # 39;pt & # 39
}
& lt/SCRIPT & gt;
& ltP
align = right & gt选择字体大小:[
& ltA
href = & quotJavaScript:do zoom(13)& quot;& gt13pt(特大号)</A>。
& ltA
href = & quotJavaScript:do zoom(10.5)& quot;& gt10.5磅(中等)</A & gt;
& ltA
href = & quotJavaScript:do zoom(9)& quot;& gt9pt(标准)</A>。
]
& lt/body & gt;
& lt/html & gt;
如何用JS控制网页字体大小,使其能够自适应屏幕大小?
1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9,对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:width:xxx px;
只能指定百分比宽度:width: xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
js怎么放大页面文字?
字体设置大小需要在<font size="?">设置
图面需要在你连接图片url的<input width=“?” height=“?”>设置
位置的控制就是要通过你所使用的框架类型 是表单或者是table等来控制了应该是这样设置的你可以看看。希望我的对你有帮助,祝生活愉快幸福哦