<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> </script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>無標題頁</title> <style type="text/css"> .wang { color:Red; background-color:Green; } .ai { color:Blue; background-color:Yellow; } </style> <script language="javascript" type="text/javascript"> //用javascript設定背景顏色 function Button1_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.style.backgroundColor='blue'; return false; } //用javascript 邊框寬度 function Button4_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); //單獨設定borderWidth沒有意義,必須和borderyStyle聯合使用 hyperlink.style.borderStyle='solid'; hyperlink.style.borderWidth=1; return false; } //用javascript設定邊框顏色 function Button2_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.style.borderStyle='solid'; hyperlink.style.borderWidth=1; hyperlink.style.borderColor='red'; return false; } //用javascript設定邊框樣式 function Button3_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.style.borderStyle='dotted'; hyperlink.style.borderWidth=1; hyperlink.style.borderColor='red'; return false; } //用javascript設定連結地址 function Button5_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); //連結地址 hyperlink.setAttribute('href','http://www.wangaihui.com'); return false; } //用javascript設定連結開啟目標 function Button14_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.setAttribute('href','http://www.wangaihui.com'); //連結開啟目標 hyperlink.setAttribute('target','_blank'); return false; } //用javascript設定css樣式 function Button8_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); if(hyperlink.className=="wang") { hyperlink.setAttribute('className','ai'); } else { hyperlink.setAttribute('className','wang'); } return false; } //用javascript設定是否可用 function Button7_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.disabled=!hyperlink.disabled; return false; } //用javascript設定字型 function Button6_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.style.fontStyle='italic'; hyperlink.style.fontSize=24; return false; } //用javascript設定字型 function Button9_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.style.color='red'; return false; } //用javascript設定寬度與高度 function Button10_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.style.height=200; hyperlink.style.width=200; alert(hyperlink.style.height); return false; } //用javascript設定文本 function Button11_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.innerText="www.wangaihui.com"; return false; } //用javascript設定提示 function Button12_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; var hyperlink=document.getElementById("HyperLink1"); hyperlink.setAttribute('title','歡迎來到世界雕刻之鄉,---中國曲陽'); return false; } //用javascript設定是否顯示 var tempc=null; var tempp=null; function Button13_Click() { //如果瀏覽器不支援getElementById方法 //返回true交給伺服器端處理 if(!document.getElementById) return true; if(tempc==null) { //隱藏 var hyperlink=document.getElementById("HyperLink1"); tempc=hyperlink; var parent=hyperlink.parentElement; tempp=parent; parent.removeChild(hyperlink); } else { //顯示 var button1=document.getElementById("position"); tempp.insertBefore(tempc,button1); tempc=null; tempp=null; } return false; } </script></head><body> <form id="form1" runat="server"> <div> <br /> <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink> <%-- 定位將來hyperLink要顯示的位置--%> <br id="position" /> <br /> <asp:Button ID="Button1" runat="server" OnClientClick ="return Button1_Click();" Text="backColor" /> <br /> <asp:Button ID="Button4" runat="server" OnClientClick="return Button4_Click();" Text="borderWidth" /><br /> <asp:Button ID="Button2" runat="server" OnClientClick="return Button2_Click();" Text="borderColor" /><br /> <asp:Button ID="Button3" runat="server" OnClientClick="return Button3_Click();" Text="borderStyle" /><br /> <asp:Button ID="Button5" runat="server" OnClientClick="return Button5_Click();" Text="navigateUrl" /><br /> <asp:Button ID="Button14" runat="server" OnClientClick="return Button14_Click();" Text="target" /><br /> <asp:Button ID="Button8" runat="server" OnClientClick="return Button8_Click();" Text="cssClass" /><br /> <asp:Button ID="Button7" runat="server" OnClientClick="return Button7_Click();" Text="enable" /><br /> <asp:Button ID="Button6" runat="server" OnClientClick="return Button6_Click();" Text="font" /> <br /> <asp:Button ID="Button9" runat="server" OnClientClick="return Button9_Click();" Text="foreColor" /><br /> <asp:Button ID="Button10" runat="server" OnClientClick="return Button10_Click();" Text="Height & Width" /><br /> <asp:Button ID="Button11" runat="server" OnClientClick="return Button11_Click();" Text="Text" /><br /> <asp:Button ID="Button12" runat="server" OnClientClick="return Button12_Click();" Text="toolTip" /> <br /> <asp:Button ID="Button13" runat="server" OnClientClick="return Button13_Click();" Text="visible" /> <%-- --%> </div> </form></body></html>