jQuery 改变页面字体的大小

最新推荐文章于 2021-08-12 22:30:28 发布

aimartt

最新推荐文章于 2021-08-12 22:30:28 发布

阅读量7.1k

点赞数

分类专栏： jQuery 文章标签： jquery class function html string div

本文链接：https://blog.csdn.net/aimartt/article/details/7886284

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 改变页面字体的大小

参考资料：

《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

页面初始化后效果如图：

点击"放大"时，放大字体，点击"缩小"时，缩小字体。代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				$("span").click(function() {
					var cssFontSize = $("#para").css("font-size");	//获取字体大小
					var fontSize = parseFloat(cssFontSize);	//获取字体大小的值
					var unit = cssFontSize.slice(-2);	//获取字体大小的单位
					var className = $(this).attr("class");
					if ("zoomIn" == className) {	//放大字体
						if (fontSize <= 22) {
							fontSize += 2;
						}
					} else if ("zoomOut" == className) {	//缩小字体
						if (fontSize >= 12) {
							fontSize -= 2;
						}
					}
					$("#para").css("font-size", fontSize + unit);	
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			.zoomIn, .zoomOut {
				background: fuchsia;
				cursor: pointer;
			}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<div class="msg">
  			<div class="msg_caption">
  				<span class="zoomIn">放大</span>
  				<span class="zoomOut">缩小</span>
  			</div>
  			<div>
  				<p id="para">
  					（该内容来自维基百科）超价分子是指由一种或多种主族元素形成，<br />
  					而且中心原子价层电子数超过8的一类分子。<br />
  					例如五氯化磷、六氟化硫、磷酸根离子、三氟化氯以及三碘阴离子都是典型的超价分子。<br />
  					超价分子的概念最早是由上述几种不符合八隅体规则的分子产生的，<br />
  					而自从超价分子的概念提出以来，就处于不断的争议之中。<br />
  					八隅体规则的例外主要有三种，缺电子分子、奇电子分子和超价分子。<br />
  					利用分子轨道理论可以很好地解释前两种分子，然而对于超价分子，<br />
  					不但结构没有得到公认的解释，甚至定义都处于争论之中。<br />
  					超价分子的概念最早由杰里米·穆舍尔在1969年正式提出，<br />
  					他定义以VA族到0族元素为中心原子，而且中心原子氧化态比最低氧化态低的分子为超价分子。<br />
  					超价分子的N-X-L命名法在1960年提出，经常用于区分超价分子中心原子所在主族。<br />
  					关于超价分子本质和分类方法的争论可追溯到20世纪20年代，<br />
  					即路易斯和兰米尔时期关于化学键本质的争论。
  				</p>
  			</div>
  		</div>
  	</body>
</html>

aimartt

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jQuery 改变页面字体的大小

jQuery 改变页面字体的大小参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社页面初始化后效果如图：点击"放大"时，放大字体，点击"缩小"时，缩小字体。代码如下：<%String path = request.getContextPath();String basePath = request.get
复制链接

扫一扫

专栏目录