jQuery 改变页面字体的大小

来源：互联网发布：阿里云软件与浪潮编辑：程序博客网时间：2024/05/22 22:57

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>