[原创]用JavaScript和CSS实现文字缩放

xchange · 发表于 2005 年 5 月 24 日 17:54:29

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？注册

×

现在很多的网站都用像素作为单位来设定网页上文字的大小，这样的网页是不能IE中的“查看”->“文字大小”来改变文字大小的。因为有些网站把自己的字体设置的很小，一些视力不佳的用户和显示器较小（像素点也跟着变小）的用户就会抱怨他们看网页实在是太累了。所以我在我的Yinwei.info上用了一些JavaScript，并且配合CSS来使用户可以放大屏幕上的文字。

CSS方面没有什么不寻常的东西。在body中设置font-size:12px;，然后定义h1、h2等等的大小的时候都用了em做单位。em是一个相对的长度，相当于一个中文字的高度（这种说法不甚准确）。因此你改变了body中的font-size，网页上所有的文字都要跟着改变大小，这就是基本的原理。

下面就要用脚本来实现这个原理了，我们创建一个函数setFont()：

function setFont(x) {
     if (x=="large") {
               document.body.style.fontSize="14px";
     }
     if (x=="normal") {
               document.body.style.fontSize="12px";
     }
}

然后在页面中创建两个链接以方便用户设定文字大小：

<a href="#" onclick="setFont('normal')">标准字体</a>
<a href="#" onclick="setFont('large')">大号字体</a>

这时，单击这些链接便可以改变页面文字的大小。需要注意的是如果在页面中有其它基于像素控制的元素，你可能需要同时改变它们的大小，以免出现可怕的错误。

但是这时又出现了新的问题，用户决定继续看下去，于是他单击了一个链接进入了一个新的页面。可是这个页面的文字还是原来的大小，他不得不再次单击“大号字体”。是不是很麻烦？我们用Cookie来解决这个问题。

Cookie是什么？你不知道？快去看看有关Web设计的书吧。去Google查询一些也可以。

为了方便读取Cookie，我们创建getCookie()函数：

function getCookie(cookieName) {
      var cookieString=document.cookie;
      var start=cookieString.indexOf(cookieName + '=');
      if (start==-1) return null;
      start+=cookieName.length + 1;
      var end=cookieString.indexOf(';', start);
      if (end==-1) return unescape(cookieString.substring(start));
      return unescape(cookieString.substring(start, end));
}

我们决定在用户设定文字大小的时候把他的选择写入Cookie，并且设定有效期为1个月。于是修改setFont()函数：

function setFont(x) {
      var expires=new Date();
      expires.setTime(expires.getTime()+1*30*24*60*60*1000);
      if (x=="large") {
           document.body.style.fontSize="14px";
           document.cookie='font=large;expires='+expires.toGMTString();
      }
      if (x=="normal") {
           document.body.style.fontSize="12px";
           document.cookie='font=normal;expires='+expires.toGMTString();
      }
}

现在我们要让用户在加载页面的时候由浏览器自动改变大小。现在创建一个individuation()函数：
function individuation() {
      var font=getCookie('font');
      if (font=='normal') {
           setFont('normal');
      }
      if (font=='large') {
           setFont('large');
      }
}
然后在<body>中添加onload="individuation()"以使该函数在页面载入时运行。
好了，这下他不用再一次又一次地单击“大号文字”了。
有兴趣的朋友可以研究http://www.yinwei.info/scripts/basic.js和http://www.yinwei.info/style/default.css以及http://www.yinwei.info网站来了解它的工作原理。如果你有什么想法或者遇到了bug，请务必告知。

……………………我在编程营发帖就是为了抛砖引玉……………………

天下无双 · 发表于 2005 年 5 月 24 日 18:31:22

学习了~

xchange · 发表于 2005 年 5 月 24 日 17:54:29

现在很多的网站都用像素作为单位来设定网页上文字的大小，这样的网页是不能IE中的“查看”->“文字大小”来改变文字大小的。因为有些网站把自己的字体设置的很小，一些视力不佳的用户和显示器较小（像素点也跟着变小）的用户就会抱怨他们看网页实在是太累了。所以我在我的Yinwei.info上用了一些JavaScript，并且配合CSS来使用户可以放大屏幕上的文字。

CSS方面没有什么不寻常的东西。在body中设置font-size:12px;，然后定义h1、h2等等的大小的时候都用了em做单位。em是一个相对的长度，相当于一个中文字的高度（这种说法不甚准确）。因此你改变了body中的font-size，网页上所有的文字都要跟着改变大小，这就是基本的原理。

下面就要用脚本来实现这个原理了，我们创建一个函数setFont()：

function setFont(x) {
     if (x=="large") {
               document.body.style.fontSize="14px";
     }
     if (x=="normal") {
               document.body.style.fontSize="12px";
     }
}

然后在页面中创建两个链接以方便用户设定文字大小：

<a href="#" onclick="setFont('normal')">标准字体</a>
<a href="#" onclick="setFont('large')">大号字体</a>

这时，单击这些链接便可以改变页面文字的大小。需要注意的是如果在页面中有其它基于像素控制的元素，你可能需要同时改变它们的大小，以免出现可怕的错误。

但是这时又出现了新的问题，用户决定继续看下去，于是他单击了一个链接进入了一个新的页面。可是这个页面的文字还是原来的大小，他不得不再次单击“大号字体”。是不是很麻烦？我们用Cookie来解决这个问题。

Cookie是什么？你不知道？快去看看有关Web设计的书吧。去Google查询一些也可以。

为了方便读取Cookie，我们创建getCookie()函数：

function getCookie(cookieName) {
      var cookieString=document.cookie;
      var start=cookieString.indexOf(cookieName + '=');
      if (start==-1) return null;
      start+=cookieName.length + 1;
      var end=cookieString.indexOf(';', start);
      if (end==-1) return unescape(cookieString.substring(start));
      return unescape(cookieString.substring(start, end));
}

我们决定在用户设定文字大小的时候把他的选择写入Cookie，并且设定有效期为1个月。于是修改setFont()函数：

function setFont(x) {
      var expires=new Date();
      expires.setTime(expires.getTime()+1*30*24*60*60*1000);
      if (x=="large") {
           document.body.style.fontSize="14px";
           document.cookie='font=large;expires='+expires.toGMTString();
      }
      if (x=="normal") {
           document.body.style.fontSize="12px";
           document.cookie='font=normal;expires='+expires.toGMTString();
      }
}

现在我们要让用户在加载页面的时候由浏览器自动改变大小。现在创建一个individuation()函数：
function individuation() {
      var font=getCookie('font');
      if (font=='normal') {
           setFont('normal');
      }
      if (font=='large') {
           setFont('large');
      }
}
然后在<body>中添加onload="individuation()"以使该函数在页面载入时运行。
好了，这下他不用再一次又一次地单击“大号文字”了。
有兴趣的朋友可以研究http://www.yinwei.info/scripts/basic.js和http://www.yinwei.info/style/default.css以及http://www.yinwei.info网站来了解它的工作原理。如果你有什么想法或者遇到了bug，请务必告知。

……………………我在编程营发帖就是为了抛砖引玉……………………

xchange · 发表于 2005 年 5 月 24 日 17:54:29

现在很多的网站都用像素作为单位来设定网页上文字的大小，这样的网页是不能IE中的“查看”->“文字大小”来改变文字大小的。因为有些网站把自己的字体设置的很小，一些视力不佳的用户和显示器较小（像素点也跟着变小）的用户就会抱怨他们看网页实在是太累了。所以我在我的Yinwei.info上用了一些JavaScript，并且配合CSS来使用户可以放大屏幕上的文字。

CSS方面没有什么不寻常的东西。在body中设置font-size:12px;，然后定义h1、h2等等的大小的时候都用了em做单位。em是一个相对的长度，相当于一个中文字的高度（这种说法不甚准确）。因此你改变了body中的font-size，网页上所有的文字都要跟着改变大小，这就是基本的原理。

下面就要用脚本来实现这个原理了，我们创建一个函数setFont()：

function setFont(x) {
     if (x=="large") {
               document.body.style.fontSize="14px";
     }
     if (x=="normal") {
               document.body.style.fontSize="12px";
     }
}

然后在页面中创建两个链接以方便用户设定文字大小：

<a href="#" onclick="setFont('normal')">标准字体</a>
<a href="#" onclick="setFont('large')">大号字体</a>

这时，单击这些链接便可以改变页面文字的大小。需要注意的是如果在页面中有其它基于像素控制的元素，你可能需要同时改变它们的大小，以免出现可怕的错误。

但是这时又出现了新的问题，用户决定继续看下去，于是他单击了一个链接进入了一个新的页面。可是这个页面的文字还是原来的大小，他不得不再次单击“大号字体”。是不是很麻烦？我们用Cookie来解决这个问题。

Cookie是什么？你不知道？快去看看有关Web设计的书吧。去Google查询一些也可以。

为了方便读取Cookie，我们创建getCookie()函数：

function getCookie(cookieName) {
      var cookieString=document.cookie;
      var start=cookieString.indexOf(cookieName + '=');
      if (start==-1) return null;
      start+=cookieName.length + 1;
      var end=cookieString.indexOf(';', start);
      if (end==-1) return unescape(cookieString.substring(start));
      return unescape(cookieString.substring(start, end));
}

我们决定在用户设定文字大小的时候把他的选择写入Cookie，并且设定有效期为1个月。于是修改setFont()函数：

function setFont(x) {
      var expires=new Date();
      expires.setTime(expires.getTime()+1*30*24*60*60*1000);
      if (x=="large") {
           document.body.style.fontSize="14px";
           document.cookie='font=large;expires='+expires.toGMTString();
      }
      if (x=="normal") {
           document.body.style.fontSize="12px";
           document.cookie='font=normal;expires='+expires.toGMTString();
      }
}

现在我们要让用户在加载页面的时候由浏览器自动改变大小。现在创建一个individuation()函数：
function individuation() {
      var font=getCookie('font');
      if (font=='normal') {
           setFont('normal');
      }
      if (font=='large') {
           setFont('large');
      }
}
然后在<body>中添加onload="individuation()"以使该函数在页面载入时运行。
好了，这下他不用再一次又一次地单击“大号文字”了。
有兴趣的朋友可以研究http://www.yinwei.info/scripts/basic.js和http://www.yinwei.info/style/default.css以及http://www.yinwei.info网站来了解它的工作原理。如果你有什么想法或者遇到了bug，请务必告知。

……………………我在编程营发帖就是为了抛砖引玉……………………

xchange · 发表于 2005 年 5 月 24 日 17:54:29

现在很多的网站都用像素作为单位来设定网页上文字的大小，这样的网页是不能IE中的“查看”->“文字大小”来改变文字大小的。因为有些网站把自己的字体设置的很小，一些视力不佳的用户和显示器较小（像素点也跟着变小）的用户就会抱怨他们看网页实在是太累了。所以我在我的Yinwei.info上用了一些JavaScript，并且配合CSS来使用户可以放大屏幕上的文字。

CSS方面没有什么不寻常的东西。在body中设置font-size:12px;，然后定义h1、h2等等的大小的时候都用了em做单位。em是一个相对的长度，相当于一个中文字的高度（这种说法不甚准确）。因此你改变了body中的font-size，网页上所有的文字都要跟着改变大小，这就是基本的原理。

下面就要用脚本来实现这个原理了，我们创建一个函数setFont()：

function setFont(x) {
     if (x=="large") {
               document.body.style.fontSize="14px";
     }
     if (x=="normal") {
               document.body.style.fontSize="12px";
     }
}

然后在页面中创建两个链接以方便用户设定文字大小：

<a href="#" onclick="setFont('normal')">标准字体</a>
<a href="#" onclick="setFont('large')">大号字体</a>

这时，单击这些链接便可以改变页面文字的大小。需要注意的是如果在页面中有其它基于像素控制的元素，你可能需要同时改变它们的大小，以免出现可怕的错误。

但是这时又出现了新的问题，用户决定继续看下去，于是他单击了一个链接进入了一个新的页面。可是这个页面的文字还是原来的大小，他不得不再次单击“大号字体”。是不是很麻烦？我们用Cookie来解决这个问题。

Cookie是什么？你不知道？快去看看有关Web设计的书吧。去Google查询一些也可以。

为了方便读取Cookie，我们创建getCookie()函数：

function getCookie(cookieName) {
      var cookieString=document.cookie;
      var start=cookieString.indexOf(cookieName + '=');
      if (start==-1) return null;
      start+=cookieName.length + 1;
      var end=cookieString.indexOf(';', start);
      if (end==-1) return unescape(cookieString.substring(start));
      return unescape(cookieString.substring(start, end));
}

我们决定在用户设定文字大小的时候把他的选择写入Cookie，并且设定有效期为1个月。于是修改setFont()函数：

function setFont(x) {
      var expires=new Date();
      expires.setTime(expires.getTime()+1*30*24*60*60*1000);
      if (x=="large") {
           document.body.style.fontSize="14px";
           document.cookie='font=large;expires='+expires.toGMTString();
      }
      if (x=="normal") {
           document.body.style.fontSize="12px";
           document.cookie='font=normal;expires='+expires.toGMTString();
      }
}

现在我们要让用户在加载页面的时候由浏览器自动改变大小。现在创建一个individuation()函数：
function individuation() {
      var font=getCookie('font');
      if (font=='normal') {
           setFont('normal');
      }
      if (font=='large') {
           setFont('large');
      }
}
然后在<body>中添加onload="individuation()"以使该函数在页面载入时运行。
好了，这下他不用再一次又一次地单击“大号文字”了。
有兴趣的朋友可以研究http://www.yinwei.info/scripts/basic.js和http://www.yinwei.info/style/default.css以及http://www.yinwei.info网站来了解它的工作原理。如果你有什么想法或者遇到了bug，请务必告知。

……………………我在编程营发帖就是为了抛砖引玉……………………

xchange · 发表于 2005 年 5 月 24 日 17:54:29

现在很多的网站都用像素作为单位来设定网页上文字的大小，这样的网页是不能IE中的“查看”->“文字大小”来改变文字大小的。因为有些网站把自己的字体设置的很小，一些视力不佳的用户和显示器较小（像素点也跟着变小）的用户就会抱怨他们看网页实在是太累了。所以我在我的Yinwei.info上用了一些JavaScript，并且配合CSS来使用户可以放大屏幕上的文字。

CSS方面没有什么不寻常的东西。在body中设置font-size:12px;，然后定义h1、h2等等的大小的时候都用了em做单位。em是一个相对的长度，相当于一个中文字的高度（这种说法不甚准确）。因此你改变了body中的font-size，网页上所有的文字都要跟着改变大小，这就是基本的原理。

下面就要用脚本来实现这个原理了，我们创建一个函数setFont()：

function setFont(x) {
     if (x=="large") {
               document.body.style.fontSize="14px";
     }
     if (x=="normal") {
               document.body.style.fontSize="12px";
     }
}

然后在页面中创建两个链接以方便用户设定文字大小：

<a href="#" onclick="setFont('normal')">标准字体</a>
<a href="#" onclick="setFont('large')">大号字体</a>

这时，单击这些链接便可以改变页面文字的大小。需要注意的是如果在页面中有其它基于像素控制的元素，你可能需要同时改变它们的大小，以免出现可怕的错误。

但是这时又出现了新的问题，用户决定继续看下去，于是他单击了一个链接进入了一个新的页面。可是这个页面的文字还是原来的大小，他不得不再次单击“大号字体”。是不是很麻烦？我们用Cookie来解决这个问题。

Cookie是什么？你不知道？快去看看有关Web设计的书吧。去Google查询一些也可以。

为了方便读取Cookie，我们创建getCookie()函数：

function getCookie(cookieName) {
      var cookieString=document.cookie;
      var start=cookieString.indexOf(cookieName + '=');
      if (start==-1) return null;
      start+=cookieName.length + 1;
      var end=cookieString.indexOf(';', start);
      if (end==-1) return unescape(cookieString.substring(start));
      return unescape(cookieString.substring(start, end));
}

我们决定在用户设定文字大小的时候把他的选择写入Cookie，并且设定有效期为1个月。于是修改setFont()函数：

function setFont(x) {
      var expires=new Date();
      expires.setTime(expires.getTime()+1*30*24*60*60*1000);
      if (x=="large") {
           document.body.style.fontSize="14px";
           document.cookie='font=large;expires='+expires.toGMTString();
      }
      if (x=="normal") {
           document.body.style.fontSize="12px";
           document.cookie='font=normal;expires='+expires.toGMTString();
      }
}

现在我们要让用户在加载页面的时候由浏览器自动改变大小。现在创建一个individuation()函数：
function individuation() {
      var font=getCookie('font');
      if (font=='normal') {
           setFont('normal');
      }
      if (font=='large') {
           setFont('large');
      }
}
然后在<body>中添加onload="individuation()"以使该函数在页面载入时运行。
好了，这下他不用再一次又一次地单击“大号文字”了。
有兴趣的朋友可以研究http://www.yinwei.info/scripts/basic.js和http://www.yinwei.info/style/default.css以及http://www.yinwei.info网站来了解它的工作原理。如果你有什么想法或者遇到了bug，请务必告知。

……………………我在编程营发帖就是为了抛砖引玉……………………

xchange · 发表于 2005 年 5 月 24 日 17:54:29

现在很多的网站都用像素作为单位来设定网页上文字的大小，这样的网页是不能IE中的“查看”->“文字大小”来改变文字大小的。因为有些网站把自己的字体设置的很小，一些视力不佳的用户和显示器较小（像素点也跟着变小）的用户就会抱怨他们看网页实在是太累了。所以我在我的Yinwei.info上用了一些JavaScript，并且配合CSS来使用户可以放大屏幕上的文字。

CSS方面没有什么不寻常的东西。在body中设置font-size:12px;，然后定义h1、h2等等的大小的时候都用了em做单位。em是一个相对的长度，相当于一个中文字的高度（这种说法不甚准确）。因此你改变了body中的font-size，网页上所有的文字都要跟着改变大小，这就是基本的原理。

下面就要用脚本来实现这个原理了，我们创建一个函数setFont()：

function setFont(x) {
     if (x=="large") {
               document.body.style.fontSize="14px";
     }
     if (x=="normal") {
               document.body.style.fontSize="12px";
     }
}

然后在页面中创建两个链接以方便用户设定文字大小：

<a href="#" onclick="setFont('normal')">标准字体</a>
<a href="#" onclick="setFont('large')">大号字体</a>

这时，单击这些链接便可以改变页面文字的大小。需要注意的是如果在页面中有其它基于像素控制的元素，你可能需要同时改变它们的大小，以免出现可怕的错误。

但是这时又出现了新的问题，用户决定继续看下去，于是他单击了一个链接进入了一个新的页面。可是这个页面的文字还是原来的大小，他不得不再次单击“大号字体”。是不是很麻烦？我们用Cookie来解决这个问题。

Cookie是什么？你不知道？快去看看有关Web设计的书吧。去Google查询一些也可以。

为了方便读取Cookie，我们创建getCookie()函数：

function getCookie(cookieName) {
      var cookieString=document.cookie;
      var start=cookieString.indexOf(cookieName + '=');
      if (start==-1) return null;
      start+=cookieName.length + 1;
      var end=cookieString.indexOf(';', start);
      if (end==-1) return unescape(cookieString.substring(start));
      return unescape(cookieString.substring(start, end));
}

我们决定在用户设定文字大小的时候把他的选择写入Cookie，并且设定有效期为1个月。于是修改setFont()函数：

function setFont(x) {
      var expires=new Date();
      expires.setTime(expires.getTime()+1*30*24*60*60*1000);
      if (x=="large") {
           document.body.style.fontSize="14px";
           document.cookie='font=large;expires='+expires.toGMTString();
      }
      if (x=="normal") {
           document.body.style.fontSize="12px";
           document.cookie='font=normal;expires='+expires.toGMTString();
      }
}

现在我们要让用户在加载页面的时候由浏览器自动改变大小。现在创建一个individuation()函数：
function individuation() {
      var font=getCookie('font');
      if (font=='normal') {
           setFont('normal');
      }
      if (font=='large') {
           setFont('large');
      }
}
然后在<body>中添加onload="individuation()"以使该函数在页面载入时运行。
好了，这下他不用再一次又一次地单击“大号文字”了。
有兴趣的朋友可以研究http://www.yinwei.info/scripts/basic.js和http://www.yinwei.info/style/default.css以及http://www.yinwei.info网站来了解它的工作原理。如果你有什么想法或者遇到了bug，请务必告知。

……………………我在编程营发帖就是为了抛砖引玉……………………

账号		自动登录	找回密码
密码			注册