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，仅支持insertRule34 ????????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 ????else42 ????????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");//IE617 ????????}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()方法参数设为null37 ????????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 ????????else48 ????????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基础（三）
原文地址：https://www.cnblogs.com/agasha/p/9997590.html