Js方式实现WEB网页文字大小切换

Posted in January 21, 2010 at 09:40

Description:Document Text Resizer adds the ability for your users to toggle your webpage's font size, with persistent cookies then used to remember the setting. The script works unobtrusively and with any webpage, by adding to the page one of several CSS classes (on the <HTML> element itself) that change the page's font size depending on the setting clicked on. You can even custom tailor the CSS classes to only target a portion of the page (ie: just the content area), so just that area's text size changes.

文本Resizer的添加让用户切换网页的字体大小，脚本记住Cookie的设置。该脚本结合加入网页的CSS样式表（<html>元素），改变网页的字体大小,字体大小取决于第一页上的点击设置。您甚至可以自定义CSS样式表,定制只针对网页某部分的文字大小Resize（如：只要内容区域）。

一 . Javascript方式实现WEB网页文字大小切换

下载两个文件和5个PNG连接图片
在网页的<head>…</head>之间加入下列代码:
<link href="doctextsizer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="doctextsizer.js">
</script>
在网页的合适位置加入下列连接:
<p>Select the desired text size (persisted using cookies):</p>
<a href="#" class="texttoggler" rel="xsmallview" title="extra small size"><img src="xsmallview.png" /></a>
<a href="#" class="texttoggler" rel="smallview" title="small size"><img src="smallview.png" /></a>
<a href="#" class="texttoggler" rel="normalview" title="normal size"><img src="normalview.png" /></a>
<a href="#" class="texttoggler" rel="largeview" title="large size"><img src="largeview.png" /></a>
<a href="#" class="texttoggler" rel="xlargeview" title="extra large size"><img src="xlargeview.png" /></a>
<script type="text/javascript">
//documenttextsizer.setup("shared_css_class_of_toggler_controls")
documenttextsizer.setup("texttoggler")
</script>

PS:你可以自由减少切换连接.比如下面是3个控制连接:
<a href="#" class="texttoggler" rel="smallview" title="small size">
<img src="smallview.png" /></a>
<a href="#" class="texttoggler" rel="normalview" title="normal size">
<img src="normalview.png" /></a>
<a href="#" class="texttoggler" rel="largeview" title="large size">
<img src="largeview.png" /></a>
CSS样式表范例解释:
.xsmallview .contentarea{ /*CSS for "extra small font" setting*/
font-size: 11px;}
//CLASS为.contentarea的文字按下”xsmall”时,大小为11px.
.smallview .contentarea{ /*CSS for "small font" setting*/
font-size: 13px;}
//CLASS为.contentarea的文字按下”small”时,大小为13px.
.normalview .contentarea{ /*CSS to return page to default setting*/
}
//CLASS为.contentarea的文字大小遵循网页自身的文字大小.
.largeview .contentarea{ /*CSS for "large font" setting*/
font-size: 21px;}
//CLASS为.contentarea的文字按下”large”时,大小为21px.
.xlargeview .contentarea{ /*CSS for "extra large font" setting*/
font-size: 24px;}
//CLASS为.contentarea的文字按下”xlarge”时,大小为24px.