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、操作样式表

  1. <style type="text/css">
  2. #box { color:green; }
  3. .red { color:red; }
  4. .blue { color:blue; }
  5. </style>
  6. <link href="style1.css" rel="stylesheet" type="text/css" media="all" />
  7. <script>
  8. window.onload = function(){
  9. var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;//IE浏览器中rules、标准浏览器cssRules
  10. var box = document.getElementById("box");
  11. box.innerHTML = "第一个样式表中第三个样式选择符 = " + cssRules[2].selectorText;//.blue 读取样式选择符,cssRules[2].style.color="#999",编辑样式,慎用
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <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基础(三)的更多相关文章

  1. js基础 三种弹出框 数据类型

    总结:js三个组成部分ES:语法DOM:对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互BOM:对象模型 => 通过js代码与浏览器自带功能进行交互 引入 ...

  2. JS基础三

    1.delete删除对对象的属性和方法的定义.强制解除对它的引用,将其设置为 undefined delete 运算符不能删除开发者未定义的属性和方法. 2.void 运算符对任何值返回 undefi ...

  3. JS基础(三)构造函数

    JS中的构造函数 <script language="JavaScript"> window.onload = function(){ function Bottle( ...

  4. node.js 基础三 消息推送

  5. 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  6. NodeJs>------->>第三章:Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  7. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  8. JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构

    JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...

  9. Three.js基础探寻三——透视投影照相机

    本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...

  10. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

随机推荐

  1. 微信小程序redirect 到tab不刷新

    // 更新2018/11/20:现在小程序的页面栈长度为10 更正 2018/11/20: 经过一段时间的实践,我发现以前方法存在很多问题,比如 getCurrentPages 方法并不在官方的 AP ...

  2. day 50 AJAX 初入门

    前情提要: jq 学不好,ajax   难用好, 食用先请先确保最起码的jq 能会用 https://www.cnblogs.com/baili-luoyun/p/10473518.html  jq ...

  3. mysql优化器在统计全表扫描的代价时的方法

    innodb 的聚集索引 的叶子结点 存放的 是 索引值以及数据页的偏移量 那么在计算全表扫描的代价是怎么计算的呢? 我们知道代价 为 cpu代价+io代价 cpu代价 就是 每5条记录比对 计算一个 ...

  4. 使用git时出现Please make sure you have the correct access rights and the repository exists.问题已解决。

    使用git时,出现Please make sure you have the correct access rights and the repository exists.问题已解决. 今天我在使用 ...

  5. POJ 1287

    #include<iostream> #include<stdio.h> #define MAXN 100 #define inf 1000000000 using names ...

  6. Visual Studio和eclipse的大小写转换快捷键

    Visual Studio: 转小写:ctrl + u 转大写:  ctrl + shift + u eclipse: 转小写:  ctrl + shift + y 转大写:  ctrl + shif ...

  7. HTTP2.0探究

    http1.1和http2.0在请求379张图片的对比演示(HTTP2.0性能惊人). HTTP2.0是HTTP协议自1999年HTTP1.1发布后的首个更新,主要基于SPDY(读speedy).  ...

  8. 2013-12-LINUX 常用命令

    查看iptables状态: service iptables status 查询LINUX开机时间多久 1. cat /proc/uptime输出: 105040.44 105024.75 秒 2. ...

  9. C/C++ -- Gui编程 -- Qt库的使用 -- QtWidget

    #include<QtGui> int main(int argc, char * argv[]) { QApplication app(argc, argv); QTextCodec:: ...

  10. ActiveMQ安全机制设置

    一.设置后台管理密码a.ActiveMQ使用的是jetty服务器,找到D:\div\apache-activemq-5.11.1\conf\jetty.xml文件: <bean id=" ...