使用 HTML 和 JavaScript 动态调整字体大小

<div class="textsize">
    text size 
    <a class="small" 
       href="javascript:void(0);" 
       onclick="reduce_font_size()" 
       title="Reduce font size">
      A
    </a> 
    <a class="big"
       href="javascript:void(0);" 
       onclick="restore_font_size()"
       title="Restore default font size">
      A
    </a> 
    <a class="bigger" 
       href="javascript:void(0);" 
       onclick="increase_font_size()"
       title="Increase font size">
      A
    </a>
</div>

此字体大小调整实现需要三个函数：`reduce_font_size`、`restore_font_size` 和 `increase_font_size`，它们都在 `control_font_size` 脚本文件中找到。所有这三个函数都需要 `initialize_font_size` 已成功调用，即全局变量 `variable_font_rule` 已成功初始化。此外，这些函数中的每一个都需要 `cookies` 脚本文件中提供的 cookie 支持。

// ************************************************* reduce_font_size

/// <summary>
///     reduces, by one point, the font size of elements that are 
///     declared as "class='variable_font'"


function reduce_font_size ( )
{
  
  if ( variable_font_rule )
    {
    var cookie = read_cookie ( COOKIE_NAME );
    var font_size = DEFAULT_FONT_SIZE;
  
    if ( cookie )
      {
      font_size = parseInt ( cookie, 10 );
      }
  
    if ( font_size > MINIMUM_FONT_SIZE )
      {
      font_size--;
      variable_font_rule.style.fontSize = ( font_size ) + "px";
      create_cookie ( COOKIE_NAME, font_size.toString ( ), 0 );
      }
    }
}

// ************************************************ restore_font_size

/// <summary>
///     restores the font size of elements that are declared as 
///     "class='variable_font'" to the default font size

function restore_font_size ( )
{

  if ( variable_font_rule )
    {
    var font_size = DEFAULT_FONT_SIZE;
  
    variable_font_rule.style.fontSize = ( font_size ) + "px";
    create_cookie ( COOKIE_NAME, font_size.toString ( ), 0 );
    }
}
  
// *********************************************** increase_font_size

/// <summary>
///     increases, by one point, the font size of elements that are 
///     declared as "class='variable_font'"

function increase_font_size ( )
{

  if ( variable_font_rule )
    {
    var cookie = read_cookie ( COOKIE_NAME );
    var font_size = DEFAULT_FONT_SIZE;
  
    if ( cookie )
      {
      font_size = parseInt ( cookie, 10 );
      }
  
    if ( font_size < MAXIMUM_FONT_SIZE )
      {
      font_size++;
      variable_font_rule.style.fontSize = ( font_size ) + "px";
      create_cookie ( COOKIE_NAME, font_size.toString ( ), 0 );
      }
    }
}

`control_font_size` 脚本中使用的全局常量是

var COOKIE_NAME = "SAVED_VARIABLE_FONT_SIZE";
var DEFAULT_FONT_SIZE = 13;
var MAXIMUM_FONT_SIZE = 24;
var MINIMUM_FONT_SIZE = 8;

cookies 脚本为字体大小脚本提供支持。设置 cookie 以保留用户从网页加载到网页加载的所需字体大小。

// http://www.quirksmode.org/js/cookies.html

// **************************************************** create_cookie

/// <synopsis>
///     create_cookie ( name, value, days );
/// </synopsis>
///
/// <summary>
///     creates a cookie with the specified name, value, and 
///     expiration
/// </summary>
///
/// <param name="name">
///     a string containing the name of the cookie. if a cookie 
///     with the same name exists, it will be overwritten.
/// </param>
///
/// <param name="value">
///     a string containing the value to be assigned to the 
///     cookie
/// </param>
///
/// <param name="days">
///     the cookie expiration, specified in days
/// </param>
///
/// <example>
///     When calling createCookie() you have to give it three 
///     three pieces of information: the name and value of the 
///     cookie and the number of days it is to remain active. 
///     For example, to set a cookie named 'mycookie' to the value 
///     'mycookievalue' and have it active for 7 days, use
///  
///         create_cookie ( 'mycookie', 'mycookievalue', 7 );
/// 
///     If you want the cookie to exist as a session cookie, that is 
///     the cookie is trashed when the user closes the browser, 
///     set the number of days to 0. 
///
///     If you set the number of days to a negative number, the 
///     cookie is trashed immediately.
/// <example>

function create_cookie ( name, value, days ) 
{
  var expires = "";

  if ( days ) 
    {
    var date = new Date ( );

    date.setTime ( date.getTime ( ) + 
                 ( days * 24 * 60 * 60 * 1000 ) );
    expires = "; expires=" + date.toGMTString ( );
    }

  document.cookie = name + "=" + value + expires + "; path=/";
}

// ****************************************************** read_cookie

/// <synopsis>
///     var cookie = read_cookie ( name );
///     if ( cookie )
///       {
///       // do something with the cookie value
///       }
/// </synopsis>
///
/// <summary>
///     reads the value of a cookie
/// </summary>
///
/// <param name="name">
///     a string containing the name of the cookie to be read
/// </param>
///
/// <returns>
///     if the cookie exists, a string containing the value of 
///     the cookie; otherwise, null
/// </returns>

function read_cookie ( name ) 
{
  var cookie = null;
  
  if ( document.cookie.length > 0 )
    {
    var cookies = document.cookie.split ( ';' );
    var name_with_equal = name + "=";

    for ( var i = 0; ( i < cookies.length ); i++ ) 
      {
      var a_cookie = cookies [ i ];

      a_cookie = a_cookie.replace ( /^\s*/, "" );
      if ( a_cookie.indexOf ( name_with_equal ) === 0 )
        {
        cookie = a_cookie.substring ( name_with_equal.length, 
                                      a_cookie.length );
        break;
        }
      }
    }

  return ( cookie );
}

// ***************************************************** erase_cookie

/// <synopsis>
///     erase_cookie ( name );
/// </synopsis>
///
/// <summary>
///     remove the specified cookie
/// </summary>
///
/// <param name="name">
///     a string containing the name of the cookie to be removed
/// </param>

function erase_cookie ( name )
{
  
  create_cookie ( name, "", -1 );
}

我包含以实现动态字体大小调整的 `` 块是：

<script type="text/javascript" 
  defer="defer" 
  src="Scripts/control_font_size.js"></script>
<script type="text/javascript" 
  defer="defer" 
  src="Scripts/cookies.js"></script>
<script type="text/javascript" 
      defer="defer" 
      src="Scripts/next_page.js"></script>

我将 `` 块放在 `