JQuery 改變頁面字體大小的實現代碼(實時改變網頁字體大小)

2024-05-06 14:22:21

字體：大中小

來源：轉載

供稿：網友

代碼如下:
/*
對頁面上的字體增大、縮小、恢復原始大小
需要在html頁面中定義三個元素
元素的class分別為 resetFont、increaseFont、decreaseFont
在本文件的JQuery事件中分別定義了三個元素的click事件來實現增大、縮小、恢復原始大小
*/
$(function () {
//取得字體大小，在html標記下定義了font-size
var originalFontSize = $("html").css("font-size");
//恢復默認字體大小
$(".resetFont").click(function () {
$("html").css("font-size", originalFontSize);
//JavaScript不向下執行
return false;
});

//加大字體,某個元素的class定義為increaseFont
$(".increaseFont").click(function () {
//取得當前字體大小后綴px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得當前字體大小，parseFloat()轉為float類型去除后綴
var currentFontSizeNumber = parseFloat(currentFontSize);
//新定義的字體大小
var newFontSize = currentFontSizeNumber * 1.1;
//重寫樣式表
$("html").css("font-size", newFontSize);
//JavaScript不向下執行
return false;
});

//減小字體，某個元素的class定義為decreaseFont
$(".decreaseFont").click(function () {
//取得當前字體大小后綴px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得當前字體大小，parseFloat()轉為float類型去除后綴
var currentFontSizeNumber = parseFloat(currentFontSize);
//重新定義字體大小
var newFontSize = currentFontSizeNumber * 0.9;
//重寫樣式表
$("html").css("font-size", newFontSize);
//JavaScript不向下執行
return false;
});
});

實時改變網頁字體大小，jQuery版
適時改變網頁字體大小，引入了jQuery，并且對字體最大能放大的位數或最小能縮小的倍數加了限制，避免一些無意義的功能，當字體小到規定值時，再次點擊縮小功能已經不起作用，這樣做似乎更加人性化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>適時改變網頁字體大小，jQuery版</title> <style> * { margin:0; padding:0; } .msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;} </style>    </head> <body>   放大 縮小   <p id="para"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.             </SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1046838.html'>NodeJS 模塊開發及發布詳解分享</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1046840.html'>JavaScript高級程序設計 讀書筆記之十一 內置對象Global</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流