JS基础（三）
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、操作行内样式
<script>
window.onload = function(){
var box = document.getElementById("box");
var str = box.style.cssText;//cssText获取css样式文本信息，getAttribute("style")也可，只是两者格式略有区别
var a = str.split(";");
var temp="";
for(var b in a){
var prop = a[b].split(":");
if(prop[])
temp += b + " ：" + prop[] + " = " + prop[] + "<br>";
}
box.innerHTML = "box.style.cssText = " + str;
box.innerHTML = box.innerHTML + "<br><br>" + temp;
}
</script>
</head>
<body>
<div id="box" style="width:600px; height:200px; background-color:#81F9A5; border:solid 2px blue;padding:10px"></div>
</body> <script>
window.onload = function(){
var box = document.getElementById("box"); //获取盒子的引用指针
box.onmouseover = function(){ //定义鼠标经过时的事件处理函数
box.style.setProperty("background-color", "blue", ""); //设置背景色为蓝色,移除可用removeProperty()，第三个参数表示是否设置!important命令，不设置就为“”
box.style.setProperty("border", "solid 50px red", ""); //设置边框为50像素的红色实线
}
box.onclick = function(){ //定义鼠标单击时的事件处理函数
box .innerHTML = (box.style.item() + ":" + box.style.getPropertyValue("width"));//显示盒子的宽度
box .innerHTML = box .innerHTML + "<br>" + (box.style.item() + ":" + box.style.getPropertyValue("height"));//显示盒子的高度
}
box.onmouseout = function(){ //定义鼠标移出时的事件处理函数
box.style.setProperty("background-color", "red", ""); //设置背景色为红色
box.style.setProperty("border", "solid 50px blue", ""); //设置边框为50像素的蓝色实线
}
}
</script> <script>
window.onload = function(){
var box = document.getElementById("box");
var width = box.style.width;//早期IE浏览器不支持setProperty()和getProperty()，只能使用style对象；box.style.getPropertyValue("width”)方法获取指定属性;
box.innerHTML = "盒子宽度：" + width;
}
</script>
</head>
<body>
<div id="box" style="width:300px; height:200px;border:solid 1px red" >盒子</div>
</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>
<style type="text/css">
#box { color:green; }
.red { color:red; }
.blue {
color:blue;
background-color:#FFFFFF;
}
</style>
<script>
window.onload = function(){
var styleSheets = document.styleSheets[]; //获取样式表引用指针
var index = styleSheets.length; //获取样式表中包含样式的个数
if(styleSheets.insertRule){ //判断浏览器是否支持insertRule()方法
//使用insertRule()方法在文档内部样式表中增加一个p标签选择符的样式，设置段落背景色为红色，字体颜色为白色，补白为一个字体大小。插入位置在样式表的末尾，
styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
}else{ //如果浏览器不支持insertRule()方法，FF浏览器不支持addRules，仅支持insertRule
styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
}
var p = document.getElementsByTagName("p")[];
if( document.defaultView && document.defaultView.getComputedStyle)//标准浏览器访问元素当前样式
p.innerHTML = "背 景 色："+document.defaultView.getComputedStyle(p,null).backgroundColor+"<br>字体颜色："+document.defaultView.getComputedStyle(p,null).color;
else if( p.currentStyle//IE浏览器访问元素当前样式
p.innerHTML = "背 景 色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
else
p.innerHTML = "当前浏览器无法获取最终显示样式";
}
</script>
</head>
<body>
<p class="blue">在样式表中增加样式操作</p>
</body>
28、网页换肤、设计折叠面板、设计工具提示
</style>
<script language="javascript" type="text/javascript">
window.onload = function(){
var link = document.getElementsByTagName("link")[];
var span = document.getElementById("header").getElementsByTagName("span");
span[].onclick = function()
{
link.href = "test1(0).css";
}
span[].onclick = function()
{
link.href = "test1(1).css";
}
span[].onclick = function()
{
link.href = "test1(2).css";
}
}
</script>
.expand { overflow:visible; }
.collapse {
height:28px;
overflow:hidden;
}
</style>
<script>
function Switch(dt){
var dl = dt.parentNode;
if(dl.className == "collapse")dl.className = "expand";
else dl.className = "collapse";
}
</script>
</head>
<body>
<dl>
<dt onClick="Switch(this)">标题</dt>
<dd>折叠区域<img src="data:images/3.jpg" width=""></dd>
</dl>
</body>
</style>
<script language="javascript" type="text/javascript">
window.onload = function()
{
var a = document.getElementsByTagName("a");
for(var i = ; i < a.length; i ++ )
{
tit = a[i].getAttribute("title");
if(tit) a[i].removeAttribute("title"); var div = document.createElement("div");
var txt = document.createTextNode(tit);
div.setAttribute("class", "title");
div.setAttribute("className", "title");//兼容IE
div.style.position = "absolute";
div.appendChild(txt); a[i].onmouseover = (function(i,div)
{
return function()
{
a[i].appendChild(div);
}
}
)(i,div);
a[i].onmouseout = (function(i,div)
{
return function()
{
a[i].removeChild(div);
}
}
)(i,div);
a[i].onmousemove = (function(div,e)
{
return function(e)
{
var posx = , posy = ;
if(e == null) e = window.event;
if(e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if(e.clientX || e.clientY)//兼容IE
{
if(document.documentElement.scrollTop)
{
posx = e.clientX + document.documentElement.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop;
}
else//IE5.5以下版本才有document.body.scrollLeft属性
{
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
}
}
div.style.top = (posy + ) + "px";
div.style.left = (posx + ) + "px";
} }
)(div);
}
}
</script>
</head>
<body>
<a href="#" title="新浪首页" target="_blank">新浪</a><br>
<a href="#" title="百度首页" target="_blank">百度</a><br>
<a href="#" title="腾讯首页" target="_blank">腾讯</a><br>
<a href="#" title="搜狐首页" target="_blank">搜狐</a>
</body>
29、Ajax是Asynchronous JavaScript and XML的缩写，中文翻译，异步JavaScript和XML
Ajax就是利用JavaScript脚本语言和XML数据实现客户端和服务器端之间快捷通信的一种技巧
- 基于标准化的HTML和CSS
- 通过DOM实现动态显示和交互
- 通过XML和XSLT来进行数据交换和处理
- 通过XMLHttpRequest通过异步方式获取数据
- 视同JavaScript整合以上所有的技术
30、一个最简单的Ajax实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script>
function createXMLHttpRequest(){// 创建XMLHttpRequest对象函数
var request;
if(window.XMLHttpRequest){//标准浏览器及IE6以上浏览器
request = new XMLHttpRequest();
}
else if (window.ActiveXObject){//兼容IE6以及6以下浏览器
try{
request = new ActiveXObject("Msxml2.XMLHTTP");//IE6
}
catch (e){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");//6以下
}
catch (e){
alert("初始化XMLHttpRequest对象失败，请检查浏览器是否支持XMLHttpRequest组件。");
}
}
}
return request;
}
var request = createXMLHttpRequest();
window.onload = function(){
var user = document.getElementById("user");
user.onkeyup = function(){
var name = document.getElementById("user").value;
var url = "test.asp?name=" + name;
request.open("GET", url, true);//负责连接客户端到服务器，与数据传输无关，只是表示打开连接，第三个参数默认为true，表示可以异步
request.send(null);//使用GET方法传递，send()方法参数设为null
request.onreadystatechange = updatePage;//异步回调函数，表示每当HTTP请求发生改变时，服务器都会调用该函数
}
}
function updatePage(){
if (request.readyState == ){//readyState属性值，0 未初始化，1 初始化，2 发送数据，3 数据传送中，4 数据接收完毕；
if (request.status == ){//由于每当HTTP状态码发生改变，服务器都会调用回调函数，所有须设置此值以确保一切顺利
var response = request.responseText;
var p = document.getElementsByTagName("p")[];
p.innerHTML = response;
}
else
alert(request.status);
}
} </script>
</head>
<body>
<form action="" method="get" name="form1">
<label for="user">用户名：</label>
<input name="user" id="user" type="text" />
<input name="ok" type="submit" value="提交" />
</form>
<p style="color:red;"></p>
</body>
</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基础（三）的更多相关文章
- js基础 三种弹出框 数据类型
总结:js三个组成部分ES:语法DOM:对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互BOM:对象模型 => 通过js代码与浏览器自带功能进行交互 引入 ...
- JS基础三
1.delete删除对对象的属性和方法的定义.强制解除对它的引用,将其设置为 undefined delete 运算符不能删除开发者未定义的属性和方法. 2.void 运算符对任何值返回 undefi ...
- JS基础(三)构造函数
JS中的构造函数 <script language="JavaScript"> window.onload = function(){ function Bottle( ...
- node.js 基础三 消息推送
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- NodeJs>------->>第三章：Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
- JavaScript 基础——使用js的三种方式，js中的变量，js中的输出语句，js中的运算符；js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- Three.js基础探寻三——透视投影照相机
本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...
- js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
随机推荐
- Flask从入门到精通之Flask表单
Flask请求对象包含客户端发出的所有请求信息.其中,request.form 能获取POST 请求中提交的表单数据.尽管Flask 的请求对象提供的信息足够用于处理Web 表单,但有些任务很单调,而 ...
- C# 证书打印《六》
整理思路,从新出发. 加载模版 public void loadtemplate(Label lable) { string p_tempateFile = @"fomate.xml&quo ...
- Swift 里字符串（四）large sting
对于普通的字符串,对应的_StringObject 有两个存储属性: _countAndFlagsBits: UInt64 _object: Builtin.BridgeObject _countAn ...
- 快速滑动时 `cellForRow` 的调用次数
问题 有一个 1000 个 cell 的 tableView,刚刚进入界面时,contentOffset 为 0.用手快速滑动 tableView,直至最下面一个 cell 显示在屏幕上. 这个过程中 ...
- vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser问题
如下图所示,项目在IE11下打开报错: 因为使用了 ES6 中用来传递异步消息的的Promise,而IE浏览器都不支持. 解决方法: 第一步: 安装 babel-polyfill . babel-po ...
- java API连接虚拟机上的hbase
今天用本地的eclipse连接虚拟机上的hbase数据库,代码如下: public static void main(String[] args) throws Exception{ Configur ...
- Fiddler工具详细介绍
百度看到Fiddler工具的详细介绍,转载收藏,侵权删,原文地址:http://blog.csdn.net/qq_21445563/article/details/51017605 前部分讲解Fidd ...
- Storm实现单词统计代码
import java.io.File; import java.io.IOException; import java.util.Collection; import java.util.HashM ...
- Java之IO(一)InputStream和OutputStream
转载请注明源出处:http://www.cnblogs.com/lighten/p/6964702.html 1.前言 计算机的IO操作一直都是比较重要的一环,IO顾名思义,就是输入输出流.不管是磁盘 ...
- 实用的百度下载神奇-proxyee-down
项目地址: https://github.com/monkeyWie/proxyee-down 一.下载适合你的版本 二.运行软件 三.安装证书 四.重启软件和浏览器(注意是浏览器不是客户端),就能看 ...