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
%>
原文地址：https://www.cnblogs.com/agasha/p/9997590.html
时间： 2024-10-14 21:54:41