Jun 25
文章模板都做好给后台程序员了，结果客户要文章文章字体大中小变换的功能，没办法不想麻烦兼职的程序员，就自己用JavaScript直接创建了，想想这种功能，就算浏览者禁用了JS，也没什么影响，这可是Jeremy Keith极力提倡的。这个也是为了演示专门从项目里拎出来，并且把js、css、html合并到一起。这次尝试了函数抽象化，做了参数，增加了通用性。
<pre lang="HTML" line="1" file="fontZoom.html" colla="+">
<!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>字体大中小</title>
<link rel="stylesheet" href="styles/css/style.css" type="text/css" />
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
html, body{
font-size:12px;
font-family: '宋体','新宋体',arial,verdana,sans-serif;
text-align:center;
color:#000000;
letter-spacing:1px;
background:#FFFFFF;
line-height:120%;
height:100%;
}
a{
color:#000;
text-decoration: none;
cursor:pointer;
}
a:hover {
color:#d72525;
}
dl{
width:660px;
float:left;
padding:26px 0 0 60px;
line-height:160%;
color:#464646;
}
dl dt{
padding:0 0 12px 0;
color:#bf0909;
font-weight:bold;
text-align:center;
background:url(../images/shfd5_35.gif) repeat-x bottom;
}
dl dd{
padding:16px 0;
}
.large{
font-size:16px;
}
.medium{
font-size:14px;
}
.small{
font-size:12px;
}
#authorEtcFontSize{
text-align:right;
width:660px;
float:left;
padding:10px 0 10px 60px;
color:#464646;
}
#authorEtcFontSize span{
padding:0 4px;
}
</style>
<script type="text/javascript">
function fontZoom(elementID,elementSize) {
var elementID = document.getElementById(elementID);
var fontSize = document.createElement("span");
var fontText = document.createTextNode("字体：");
fontSize.appendChild(fontText);
var fontClickL = document.createElement("a");
var fontClickM = document.createElement("a");
var fontClickS = document.createElement("a");
var fontLarge = document.createTextNode("大");
var fontMedium = document.createTextNode("中");
var fontSamll = document.createTextNode("小");
fontClickL.appendChild(fontLarge);
fontClickM.appendChild(fontMedium);
fontClickS.appendChild(fontSamll);
fontSize.appendChild(fontClickL);
fontSize.appendChild(fontClickM);
fontSize.appendChild(fontClickS);
fontClickL.setAttribute("href","#");
fontClickM.setAttribute("href","#");
fontClickS.setAttribute("href","#");
fontClickL.setAttribute("title","large");
fontClickM.setAttribute("title","medium");
fontClickS.setAttribute("title","samll");
elementID.appendChild(fontSize);
var elementSize = document.getElementsByTagName(elementSize);
elementSize[0].className = "medium";
var links = elementID.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
var title_text = links[i].getAttribute("title");
switch(title_text){
case "large":
links[i].onclick = function() {
elementSize[0].className = "large";
return false;
}
break;
case "medium":
links[i].onclick = function() {
elementSize[0].className = "medium";
return false;
}
break;
default:
links[i].onclick = function() {
elementSize[0].className = "samll";
return false;
}
}
}
}
function articlesFontZoom() {
fontZoom("authorEtcFontSize","dd");
}
window.onload = articlesFontZoom;
</script>
</head>
<body>
<dl>
<dt>哈哈，潘何增变变变</dt>
<dd id="articlesContent">
<p>哈哈，潘何增变变变。</p>
</dd>
</dl>
<div id="authorEtcFontSize">
<span>来源：来源</span><span>作者：作者</span><span>发表日期：2009-06-08</span>
</div>
</body>
</html>
<!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>字体大中小</title>
<link rel="stylesheet" href="styles/css/style.css" type="text/css" />
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
html, body{
font-size:12px;
font-family: '宋体','新宋体',arial,verdana,sans-serif;
text-align:center;
color:#000000;
letter-spacing:1px;
background:#FFFFFF;
line-height:120%;
height:100%;
}
a{
color:#000;
text-decoration: none;
cursor:pointer;
}
a:hover {
color:#d72525;
}
dl{
width:660px;
float:left;
padding:26px 0 0 60px;
line-height:160%;
color:#464646;
}
dl dt{
padding:0 0 12px 0;
color:#bf0909;
font-weight:bold;
text-align:center;
background:url(../images/shfd5_35.gif) repeat-x bottom;
}
dl dd{
padding:16px 0;
}
.large{
font-size:16px;
}
.medium{
font-size:14px;
}
.small{
font-size:12px;
}
#authorEtcFontSize{
text-align:right;
width:660px;
float:left;
padding:10px 0 10px 60px;
color:#464646;
}
#authorEtcFontSize span{
padding:0 4px;
}
</style>
<script type="text/javascript">
function fontZoom(elementID,elementSize) {
var elementID = document.getElementById(elementID);
var fontSize = document.createElement("span");
var fontText = document.createTextNode("字体：");
fontSize.appendChild(fontText);
var fontClickL = document.createElement("a");
var fontClickM = document.createElement("a");
var fontClickS = document.createElement("a");
var fontLarge = document.createTextNode("大");
var fontMedium = document.createTextNode("中");
var fontSamll = document.createTextNode("小");
fontClickL.appendChild(fontLarge);
fontClickM.appendChild(fontMedium);
fontClickS.appendChild(fontSamll);
fontSize.appendChild(fontClickL);
fontSize.appendChild(fontClickM);
fontSize.appendChild(fontClickS);
fontClickL.setAttribute("href","#");
fontClickM.setAttribute("href","#");
fontClickS.setAttribute("href","#");
fontClickL.setAttribute("title","large");
fontClickM.setAttribute("title","medium");
fontClickS.setAttribute("title","samll");
elementID.appendChild(fontSize);
var elementSize = document.getElementsByTagName(elementSize);
elementSize[0].className = "medium";
var links = elementID.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
var title_text = links[i].getAttribute("title");
switch(title_text){
case "large":
links[i].onclick = function() {
elementSize[0].className = "large";
return false;
}
break;
case "medium":
links[i].onclick = function() {
elementSize[0].className = "medium";
return false;
}
break;
default:
links[i].onclick = function() {
elementSize[0].className = "samll";
return false;
}
}
}
}
function articlesFontZoom() {
fontZoom("authorEtcFontSize","dd");
}
window.onload = articlesFontZoom;
</script>
</head>
<body>
<dl>
<dt>哈哈，潘何增变变变</dt>
<dd id="articlesContent">
<p>哈哈，潘何增变变变。</p>
</dd>
</dl>
<div id="authorEtcFontSize">
<span>来源：来源</span><span>作者：作者</span><span>发表日期：2009-06-08</span>
</div>
</body>
</html>
written by panhezeng \\ tags: JavaScript, 代码, 学习
©panhezeng for 阿潘道,2009。原文地址：http://apsay.com/?p=597
本文遵循署名-非商业性使用共享协议，转载请注明。谢谢观看，下次再来。
subscribe to
本文遵循署名-非商业性使用共享协议，转载请注明。谢谢观看，下次再来。
subscribe to
June 5th, 2010 at 12:49 am
支持！下次再来继续学习！
[Reply]