JS基礎（三）
阿新 • • 發佈：2018-11-22
參數 fff ble 發生 ima 對象 action 行數 tst
25、使用JS操作CSS樣式
- DHTML表示動態HTML(Dynamic HTML，DHTML)，不是標記語言，只是一種由微軟提出的網頁腳本化概念，目標是結合JS+HTML+CSS設計動態特效，得到很多瀏覽器廠商支持。
- CSS腳本化應用：顯隱特效、尺寸縮放、對象定位、視圖控制、透明設計、對象交互、UI交互
- CSS腳本屬性名規範：駝峰式命名法重命名CSS屬性名，去掉CSS的連字符（css屬性float在腳本中用cssFloat表示）；elementNode.style.width="100px"，px單位必須要有
26、操作行內樣式
1 <script> 2 window.onload = function(){3 var box = document.getElementById("box"); 4 var str = box.style.cssText;//cssText獲取css樣式文本信息，getAttribute("style")也可，只是兩者格式略有區別 5 var a = str.split(";"); 6 var temp=""; 7 for(var b in a){ 8 var prop = a[b].split(":"); 9 if(prop[0]) 10 temp += b + "：" + prop[0] + " = " + prop[1] + "<br>"; 11 } 12 box.innerHTML = "box.style.cssText = " + str; 13 box.innerHTML = box.innerHTML + "<br><br>" + temp; 14 } 15 </script> 16 </head> 17 <body> 18 <div id="box" style="width:600px; height:200px; background-color:#81F9A5; border:solid 2px blue;padding:10px"></div> 19 </body> 20 21 <script> 22 window.onload = function(){ 23 var box = document.getElementById("box"); //獲取盒子的引用指針 24 box.onmouseover = function(){ //定義鼠標經過時的事件處理函數 25 box.style.setProperty("background-color", "blue", ""); //設置背景色為藍色,移除可用removeProperty()，第三個參數表示是否設置!important命令，不設置就為“” 26 box.style.setProperty("border", "solid 50px red", ""); //設置邊框為50像素的紅色實線 27 } 28 box.onclick = function(){ //定義鼠標單擊時的事件處理函數 29 box .innerHTML = (box.style.item(0) + ":" + box.style.getPropertyValue("width"));//顯示盒子的寬度 30 box .innerHTML = box .innerHTML + "<br>" + (box.style.item(1) + ":" + box.style.getPropertyValue("height"));//顯示盒子的高度 31 } 32 box.onmouseout = function(){ //定義鼠標移出時的事件處理函數 33 box.style.setProperty("background-color", "red", ""); //設置背景色為紅色 34 box.style.setProperty("border", "solid 50px blue", ""); //設置邊框為50像素的藍色實線 35 } 36 } 37 </script> 38 39 <script> 40 window.onload = function(){ 41 var box = document.getElementById("box"); 42 var width = box.style.width;//早期IE瀏覽器不支持setProperty()和getProperty()，只能使用style對象；box.style.getPropertyValue("width”)方法獲取指定屬性; 43 box.innerHTML = "盒子寬度：" + width; 44 } 45 </script> 46 </head> 47 <body> 48 <div id="box" style="width:300px; height:200px;border:solid 1px red" >盒子</div> 49 </body>
27、操作樣式表
- <style type="text/css">
- #box { color:green; }
- .red { color:red; }
- .blue { color:blue; }
- </style>
- <link href="style1.css" rel="stylesheet" type="text/css" media="all" />
- <script>
- window.onload = function(){
- var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//IE瀏覽器中rules、標準瀏覽器cssRules
- var box = document.getElementById("box");
- box.innerHTML = "第一個樣式表中第三個樣式選擇符 = " + cssRules[2].selectorText;//.blue 讀取樣式選擇符，cssRules[2].style.color="#999"，編輯樣式，慎用
- }
- </script>
- </head>
- <body>
- <div id="box"></div>
17 18 <style type="text/css"> 19 #box { color:green; } 20 .red { color:red; } 21 .blue { 22 color:blue; 23 background-color:#FFFFFF; 24 } 25 </style> 26 <script> 27 window.onload = function(){ 28 var styleSheets = document.styleSheets[0]; //獲取樣式表引用指針 29 var index = styleSheets.length; //獲取樣式表中包含樣式的個數 30 if(styleSheets.insertRule){ //判斷瀏覽器是否支持insertRule()方法 31 //使用insertRule()方法在文檔內部樣式表中增加一個p標簽選擇符的樣式，設置段落背景色為紅色，字體顏色為白色，補白為一個字體大小。插入位置在樣式表的末尾， 32 styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index); 33 }else{ //如果瀏覽器不支持insertRule()方法，FF瀏覽器不支持addRules，僅支持insertRule 34 styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index); 35 } 36 var p = document.getElementsByTagName("p")[0]; 37 if( document.defaultView && document.defaultView.getComputedStyle)//標準瀏覽器訪問元素當前樣式 38 p.innerHTML = "背 景 色："+document.defaultView.getComputedStyle(p,null).backgroundColor+"<br>字體顏色："+document.defaultView.getComputedStyle(p,null).color; 39 else if( p.currentStyle//IE瀏覽器訪問元素當前樣式 40 p.innerHTML = "背 景 色："+p.currentStyle.backgroundColor+"<br>字體顏色："+p.currentStyle.color; 41 else 42 p.innerHTML = "當前瀏覽器無法獲取最終顯示樣式"; 43 } 44 </script> 45 </head> 46 <body> 47 <p class="blue">在樣式表中增加樣式操作</p> 48 </body>
28、網頁換膚、設計折疊面板、設計工具提示
1 </style> 2 <script language="javascript" type="text/javascript"> 3 window.onload = function(){ 4 var link = document.getElementsByTagName("link")[0]; 5 var span = document.getElementById("header").getElementsByTagName("span"); 6 span[0].onclick = function() 7 { 8 link.href = "test1(0).css"; 9 } 10 span[1].onclick = function() 11 { 12 link.href = "test1(1).css"; 13 } 14 span[2].onclick = function() 15 { 16 link.href = "test1(2).css"; 17 } 18 } 19 </script> 20
21 .expand { overflow:visible; } 22 .collapse { 23 height:28px; 24 overflow:hidden; 25 } 26 </style> 27 <script> 28 function Switch(dt){ 29 var dl = dt.parentNode; 30 if(dl.className == "collapse")dl.className = "expand"; 31 else dl.className = "collapse"; 32 } 33 </script> 34 </head> 35 <body> 36 <dl> 37 <dt onClick="Switch(this)">標題</dt> 38 <dd>折疊區域<img src="images/3.jpg" width="300"></dd> 39 </dl> 40 </body> 41
42 </style> 43 <script language="javascript" type="text/javascript"> 44 window.onload = function() 45 { 46 var a = document.getElementsByTagName("a"); 47 for(var i = 0; i < a.length; i ++ ) 48 { 49 tit = a[i].getAttribute("title"); 50 if(tit) a[i].removeAttribute("title"); 51 52 var div = document.createElement("div"); 53 var txt = document.createTextNode(tit); 54 div.setAttribute("class", "title"); 55 div.setAttribute("className", "title");//兼容IE 56 div.style.position = "absolute"; 57 div.appendChild(txt); 58 59 a[i].onmouseover = (function(i,div) 60 { 61 return function() 62 { 63 a[i].appendChild(div); 64 } 65 } 66 )(i,div); 67 a[i].onmouseout = (function(i,div) 68 { 69 return function() 70 { 71 a[i].removeChild(div); 72 } 73 } 74 )(i,div); 75 a[i].onmousemove = (function(div,e) 76 { 77 return function(e) 78 { 79 var posx = 0, posy = 0; 80 if(e == null) e = window.event; 81 if(e.pageX || e.pageY) 82 { 83 posx = e.pageX; 84 posy = e.pageY; 85 } 86 else if(e.clientX || e.clientY)//兼容IE 87 { 88 if(document.documentElement.scrollTop) 89 { 90 posx = e.clientX + document.documentElement.scrollLeft; 91 posy = e.clientY + document.documentElement.scrollTop; 92 } 93 else//IE5.5以下版本才有document.body.scrollLeft屬性 94 { 95 posx = e.clientX + document.body.scrollLeft; 96 posy = e.clientY + document.body.scrollTop; 97 } 98 } 99 div.style.top = (posy + 20) + "px"; 100 div.style.left = (posx + 10) + "px"; 101 } 102 103 } 104 )(div); 105 } 106 } 107 </script> 108 </head> 109 <body> 110 <a href="#" title="新浪首頁" target="_blank">新浪</a><br> 111 <a href="#" title="百度首頁" target="_blank">百度</a><br> 112 <a href="#" title="騰訊首頁" target="_blank">騰訊</a><br> 113 <a href="#" title="搜狐首頁" target="_blank">搜狐</a> 114 </body>
29、Ajax是Asynchronous JavaScript and XML的縮寫，中文翻譯，異步JavaScript和XML
Ajax就是利用JavaScript腳本語言和XML數據實現客戶端和服務器端之間快捷通信的一種技巧
- 基於標準化的HTML和CSS
- 通過DOM實現動態顯示和交互
- 通過XML和XSLT來進行數據交換和處理
- 通過XMLHttpRequest通過異步方式獲取數據
- 視同JavaScript整合以上所有的技術
30、一個最簡單的Ajax實例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 </style> 8 <script> 9 function createXMLHttpRequest(){// 創建XMLHttpRequest對象函數 10 var request; 11 if(window.XMLHttpRequest){//標準瀏覽器及IE6以上瀏覽器 12 request = new XMLHttpRequest(); 13 } 14 else if (window.ActiveXObject){//兼容IE6以及6以下瀏覽器 15 try{ 16 request = new ActiveXObject("Msxml2.XMLHTTP");//IE6 17 } 18 catch (e){ 19 try{ 20 request = new ActiveXObject("Microsoft.XMLHTTP");//6以下 21 } 22 catch (e){ 23 alert("初始化XMLHttpRequest對象失敗，請檢查瀏覽器是否支持XMLHttpRequest組件。"); 24 } 25 } 26 } 27 return request; 28 } 29 var request = createXMLHttpRequest(); 30 window.onload = function(){ 31 var user = document.getElementById("user"); 32 user.onkeyup = function(){ 33 var name = document.getElementById("user").value; 34 var url = "test.asp?name=" + name; 35 request.open("GET", url, true);//負責連接客戶端到服務器，與數據傳輸無關，只是表示打開連接，第三個參數默認為true，表示可以異步 36 request.send(null);//使用GET方法傳遞，send()方法參數設為null 37 request.onreadystatechange = updatePage;//異步回調函數，表示每當HTTP請求發生改變時，服務器都會調用該函數 38 } 39 } 40 function updatePage(){ 41 if (request.readyState == 4){//readyState屬性值，0 未初始化，1 初始化，2 發送數據，3 數據傳送中，4 數據接收完畢； 42 if (request.status == 200){//由於每當HTTP狀態碼發生改變，服務器都會調用回調函數，所有須設置此值以確保一切順利 43 var response = request.responseText; 44 var p = document.getElementsByTagName("p")[0]; 45 p.innerHTML = response; 46 } 47 else 48 alert(request.status); 49 } 50 } 51 52 </script> 53 </head> 54 <body> 55 <form action="" method="get" name="form1"> 56 <label for="user">用戶名：</label> 57 <input name="user" id="user" type="text" /> 58 <input name="ok" type="submit" value="提交" /> 59 </form> 60 <p style="color:red;"></p> 61 </body> 62 </html>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>//服務器端代碼 test.asp
<%
dim user
user = Request.QueryString("name")
Response.AddHeader "Content-Type","text/html;charset=gb2312"
if user<>"admin" then
Response.Write "輸入信息非法!"
else
Response.Write "歡迎"&user
end if
%>
JS基礎（三）