字体显示大中小

最新推荐文章于 2022-01-19 09:17:24 发布

原创最新推荐文章于 2022-01-19 09:17:24 发布 · 813 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript实例专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的JavaScript脚本，用于动态调整网页内指定元素的字体大小。通过点击按钮，可以实现字体大小的增减，同时保持行高等比例缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
	function fontZoomA(){
	     document.getElementById('fontzoom').style.fontSize='12px';
	     document.getElementById('fontzoom').style.lineHeight='26px';
	     allChanges("12px","26px");
	}
	function fontZoomB(){
	     document.getElementById('fontzoom').style.fontSize='14px';
	     document.getElementById('fontzoom').style.lineHeight='28px';
	     allChanges("16px","28px");
	}
	function fontZoomC(){
	     document.getElementById('fontzoom').style.fontSize='16px';
	     document.getElementById('fontzoom').style.lineHeight='30px';
	     allChanges("20px","30px");
	}
	function allChanges(_fontSize,_lineHeight){
		 var allSpan=document.getElementById('fontzoom').getElementsByTagName('span');
		 var allDiv=document.getElementById('fontzoom').getElementsByTagName('div');
		 for(var i=0;i<allSpan.length;i++){
			 allSpan.item(i).style.fontSize=_fontSize;
			 allSpan.item(i).style.lineHeight=_lineHeight;
		 }
		 for(var i=0;i<allDiv.length;i++){
			 allDiv.item(i).style.fontSize=_fontSize;
			 allDiv.item(i).style.lineHeight=_lineHeight;
		 }
	 }
	
</script>

字体显示：<a href="javascript:fontZoomC();">大</a> <a href="javascript:fontZoomB();">中</a> <a href="javascript:fontZoomA();">小</a>