使用者在浏览网站时，有时可能会嫌字体太小，希望能够自订大小，这种情形尤以企业资深员工、老员工最为常见。虽然 IE 等浏览器有自订字号的功能，亦可透过 Ctrl + 鼠标滚轮调整；但若网页设计人员将 font-size 的单位，写死成特定数值的 px (pixel, 像素)，则 IE 自订字号的功能即会失效。
在此版工我透过网络上寻得的范例，改写了一支可让使用者透过「下拉选单 (DropDownList)」或「文字 Hyperlink」，以自订页面中字体大小的 ASP.NET 2.0 范例。透过 JavaScript 实时反应的特性，使用者每次重选后，不必再经过 Postback，效果可马上呈现在页面中；且套用效果可套整页，或仅某个区块 (div 或 span)，亦可套至 GridView 等控件当中。若欲在您的旧系统页面中引用此功能，必须先将页面中或控件中，HTML 或 CSS 已「设死」的 font-size 属性删除，并再适当调整页面排版。
图 1 本帖的 ASP.NET 2.0 + JavaScript 下载范例执行画面
本帖的范例代码下载点：
http://files.cnblogs.com/WizardWu/070708.zip
此范例真正的关键，是位于 JavaScript 活页夹中的 ChangeFontSize.js 程序。
关键的 .aspx 代码
<body οnlοad="fireDDL_FontSize()"> <form id="form1" runat="server"> <div> 指定管道一 - 透過下拉選單 <asp:DropDownList ID="DropDownList_FontSize" runat="server"> <asp:ListItem>12</asp:ListItem> <asp:ListItem>13</asp:ListItem> <asp:ListItem>14</asp:ListItem> <asp:ListItem>15</asp:ListItem> <asp:ListItem>16</asp:ListItem> <asp:ListItem>17</asp:ListItem> <asp:ListItem>18</asp:ListItem> </asp:DropDownList>
关键的 .aspx.cs 代码
protected void Page_Load(object sender, EventArgs e) 
{
DropDownList_FontSize.Attributes["onChange"] = "javascript:doZoom(document.form1.DropDownList_FontSize.value)"; // 若登入系統後，有寫入 Session 或傳 QueryString，則下拉選單的預設選項(亦為頁面的預設字體大小px)，則設為 Session 或 QueryString 所指定的值 if (Session["theFontSize"] == null) DropDownList_FontSize.SelectedValue = "13"; // 下拉選單預設選項，亦為頁面的預設字體大小(13px) else DropDownList_FontSize.SelectedValue = Session["theFontSize"].ToString();
}
关键的 JavaScript 代码
function getElementsByName_iefix(tag, id) { var elem = document.getElementsByTagName(tag); var arr = new Array();
for(i = 0,iarr = 0; i < elem.length; i++) { att = elem[i].getAttribute("id"); if(att == id) { arr[iarr] = elem[i]; iarr++; 
} } return arr;}function doZoom(size) { var zooms = getElementsByName_iefix("div", "zoom"); for (var i = 0; i < zooms.length; i++) { zooms[i].style.fontSize = size+'px'; } //document.form1.DropDownList_FontSize.fireEvent('onChange');}//.aspx前端 html 的 body 一載入時可呼叫的。表示要讓頁面字體大小，在頁面一載入時就設為下拉選單的預設值(13px)//若不設定此項，則頁面一載入時會設為 IE 的預設字體大小(16px)function fireDDL_FontSize() { document.form1.DropDownList_FontSize.fireEvent('onChange');}
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
