JS与CSS交互及JavaScript 特效之四大家族
一、JS获取与CSS交互
问题:
（1）CSS样式有三种类型：行内样式、内部样式和外部样式
（2）JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。1.1 行内样式
通过element.style.attr（元素.style.属性）即可获取可设置<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">img{border:5px solid yellow;/*display: block;*/}.over{border:5px solid red;}.out{border:5px solid yellow;}</style><script type="text/javascript">window.onload = function(){var oImgs = document.getElementsByTagName("img");for(var i = 0;i<oImgs.length;i++){oImgs[i].onmouseover = function(){// style属性设置// style属性在获取值时，只能获取行内样式的值// this.style.border = "5px solid red";// classNamethis.className = "over";console.log(this.style.display);};oImgs[i].onmouseout = function(){// this.style.border = "5px solid yellow";// this.className = "out";};}};</script> </head> <body><!-- js与css的交互 --><!-- 通过js的方式对页面上的标签进行样式设置1.通过style属性进行设置2.通过className属性进行设置需求：鼠标移入img 显示边框颜色红色，移出显示边框黄色 默认黄色--><!-- <img onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'"src="img/1.jpg" alt="" width="200" height="200"><img onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'"src="img/2.jpg" alt="" width="200" height="200"><img onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'" src="img/3.jpg" alt="" width="200" height="200"><img onmouseover = "this.style.border='5px solid red'" onmouseout = "this.style.border='5px solid yellow'"src="img/4.jpg" alt="" width="200" height="200"> --><img style = "display: block;" src="img/1.jpg" alt="" width="200" height="200"><img src="img/2.jpg" alt="" width="200" height="200"><img src="img/3.jpg" alt="" width="200" height="200"><img src="img/4.jpg" alt="" width="200" height="200"></body> </html>导航条设置：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0px;padding: 0px}ul{list-style: none}#oDiv{margin: 0 auto;width: 80%;}ul li{float: left}ul li a{display: inline-block;width: 103px;height: 30px;text-decoration: none;background-image: url('img/bg1.gif');margin-left: 1px;font-size: 12px;text-align: center;line-height: 30px;color: white;}/*css样式*//*ul li a:hover{color: yellow;background-image: url('img/bg2.gif');}*/</style><script type="text/javascript">window.onload = function(){var aa = document.getElementsByTagName("a");for(var i = 0;i<aa.length;i++){aa[i].onmouseover = function(){this.style.color = 'yellow';this.style.backgroundImage = 'url(img/bg2.gif)';};aa[i].onmouseout = function(){this.style.color = 'white';this.style.backgroundImage = 'url(img/bg1.gif)';};}};</script> </head> <body><div id="oDiv"><ul><li><a href ="">我的空间</a></li><li><a href ="">我的照片</a></li><li><a href ="">我的说说</a></li><li><a href ="">我的日志</a></li><li><a href ="">我的朋友</a></li></ul></div> </body> </html>1.2 非行内样式获取法，因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏览器的如谷歌火狐等。
基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']
基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]【注意事项】非行内样式获取法，只能获取不能设置。
函数封装，方便多次调用：兼容所有的浏览器，包括IE6 7
function getStyle(obj, name) { //obj:操作哪一个标签 name:该标签的属性if (obj.currentStyle) { //兼容IEreturn obj.currentStyle[name];} else { //兼容非IE浏览器---谷歌 火狐等等return getComputedStyle(obj, false)[name];}}
二、JavaScript 特效之四大家族（offset/scroll/client/event）
三大系列：offset、scroll、client
事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）2.1 offset 系列
offset：偏移量,使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
a.获得元素距离带有定位父元素的位置
b.获得元素自身的大小（宽度高度）
（1） offsetWidth 和 offsetHeight （检测盒子自身宽高+padding+border）
** offsetWidth = width + padding + border;
** offsetHeight = Height + padding + border;
（2） offsetLeft 和 offsetTop （检测距离父盒子有定位的左/上面的距离）
返回距上级盒子中带有定位的盒子左边和上边的距离。和盒子本身有无定位无关。
如果父级都没有定位则以 body 为准。
offsetLeft 从父级的 padding 开始算，父级的 border 不算。
在父盒子有定位的情况下，offsetLeft == style.left (去掉px)
（3） offsetLeft 和 style.left 区别
① 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以。
② offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。
③ offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
④ 如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
（style.left在等号的左边和右边还不一样。左边的时候是属性，右边的时候是值。）//获取div标签距离父标签的距离。console.log(oDiv.offsetLeft);console.log(oDiv.offsetTop);// offsetWidth|offsetHeight 宽度：width+边框+内填充console.log(oDiv.offsetWidth);console.log(oDiv.offsetHeight);// style属性：只能调用行内样式console.log(oDiv.style.width);//通过currentStyle或者getComputedStyle解决非行内式样式的获取var width = getStyle(oDiv,"width");console.log(width);2.2 client 系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。（1）clientWidth 和 clientHeight
clientWidth：获取网页可视区域宽度（两种用法）
clientHeight：获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用，指盒子本身；body/html调用，指可视区域大小。
（2）clientX 和 clientY
clientX：鼠标距离可视区域左侧距离（event调用）
clientY：鼠标距离可视区域上侧距离（event调用）
（3） clientTop 和 clientLeft
获取盒子的 border 宽高
（4）获取屏幕的可视区
var width = (document.documentElement.clientWidth || document.body.clientWidth)
var height = (document.documentElement.clientHeight || document.body.clientHeight)//获取指定元素的父级元素对象，如果父级对象没有定位直接指向bodyconsole.log(oDiv.offsetParent);console.log("-------------------------------------------------");//clientTop获取上边框的大小console.log(oDiv.clientTop);//clientLeft获取左边框的大小console.log(oDiv.clientLeft);//获取指定元素的宽度（width+内填充）console.log(oDiv.clientWidth);//获取指定元素的宽度（width+内填充）console.log(oDiv.clientHeight);//2002.3 Scroll 系列
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。（1）ScrollWidth 和 scrollHeight（不包括border）
检测盒子的宽高。（调用者：节点元素。属性。）
盒子内容的宽高。（如果有内容超出了，显示内容的高度）
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
（2）scrollTop 和 scrollLeft
网页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
（3）有兼容性问题
① 未声明 DTD 时（谷歌只认识他）
document.body.scrollTop
② 已经声明DTD 时（IE678只认识他）
document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的
window.pageYOffset
（4）var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var top = document.documentElement.scrollTop + document.body.scrollTop;//获取被滚动条滚去的距离window.onscroll = function(){var scrollDemo = scroll();console.log(scrollDemo.left)console.log(scrollDemo.top)};//div的实际高度console.log("width: "+oDiv.scrollHeight);console.log("width: "+oDiv.scrollWidth);2.4 event 事件对象
（1）概述
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。
所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（带参，任意参数）
ie 678 支持 window.event（无参，内置）
总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
（2） 事件对象 event 的获取
IE678中，window.event
在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
（3） 兼容获取方式有两种：
不写参数直接使用event;
写参数，但是参数为event
var event = event || window.event;(主要用这种)
（4） screenX、pageX 和 clientX 的区别
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
（5） pageY 和 pageX 的兼容写法
在页面的位置 = 看得见的 + 看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left案例一：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0px;padding: 0px;}div{width: 200px;height: 200px;/*margin-top: 300px;margin-left: 200px;*/background-color: red;border: 10px solid yellow;padding-left:10px;position: relative;top: 200px;left: 200px;overflow: auto;}</style><script type="text/javascript">//方法：获取样式function getStyle(obj,name){//obj:操作哪一个标签 name:该标签的属性if(obj.currentStyle){//兼容IEreturn obj.currentStyle[name];}else{//兼容非IE浏览器---谷歌 火狐等等return getComputedStyle(obj,false)[name];}}window.onload = function(){var oDiv = document.getElementById("oDiv");//获取div标签距离父标签的距离。console.log(oDiv.offsetLeft);console.log(oDiv.offsetTop);// offsetWidth|offsetHeight 宽度：width+边框+内填充console.log(oDiv.offsetWidth);console.log(oDiv.offsetHeight);// style属性：只能调用行内样式console.log(oDiv.style.width);//通过currentStyle或者getComputedStyle解决非行内式样式的获取var width = getStyle(oDiv,"width");console.log(width);//获取指定元素的父级元素对象，如果父级对象没有定位直接指向bodyconsole.log(oDiv.offsetParent);console.log("-------------------------------------------------");//clientTop获取上边框的大小console.log(oDiv.clientTop);//clientLeft获取左边框的大小console.log(oDiv.clientLeft);//获取指定元素的宽度（width+内填充）console.log(oDiv.clientWidth);//获取指定元素的宽度（width+内填充）console.log(oDiv.clientHeight);//200var clientDemo = client();console.log(clientDemo.width);//800指的时当前屏幕的宽度console.log(clientDemo.height);//149 指的时当前屏幕的可视区高度console.log("--------------------------------------");//获取被滚动条滚去的距离window.onscroll = function(){var scrollDemo = scroll();console.log(scrollDemo.left)console.log(scrollDemo.top)};//div的实际高度console.log("width: "+oDiv.scrollHeight);console.log("width: "+oDiv.scrollWidth);}/*** scroll()方法的封装*/function scroll() {//直接return一个json对象return {"left": window.pageXOffset || document.documentElement.left || document.body.scrollLeft,"top": window.pageYOffset || document.documentElement.top || document.body.scrollTop};}/*** client浏览器窗口可视区域兼容性*/function client() {if (window.innerWidth != null) // ie9 + 最新浏览器{return {width: window.innerWidth,height: window.innerHeight}} else if (document.compatMode === "CSS1Compat") // 标准浏览器{return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight}}return { // 怪异浏览器width: document.body.clientWidth,height: document.body.clientHeight}}</script> </head> <body><script type="text/javascript">for(var i = 1;i<=1000;i++){document.write(i+"<br/>");}</script><!-- 网页的特效四大家族之一 offset --><!-- offset：偏移量 得到标签的大小以及标签距离网页两端的间距。 --><!-- client:客户端 得到屏幕的可视区宽度和高度 --><div id="oDiv">我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div> </body> </html>案例二：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#oDiv{width: 100px;height: 100px;background-color: red;position: absolute;top: 100px;left:500px;}</style><script type="text/javascript">//方法：获取非行内式样式function getStyle(obj,name){//obj:操作哪一个标签 name:该标签的属性if(obj.currentStyle){//兼容IEreturn obj.currentStyle[name];}else{//兼容非IE浏览器---谷歌 火狐等等return getComputedStyle(obj,false)[name];}}/*** scroll()方法的封装*/function scroll() {//直接return一个json对象return {"left": window.pageXOffset || document.documentElement.left || document.body.scrollLeft,"top": window.pageYOffset || document.documentElement.top || document.body.scrollTop};}window.onload = function(){//1.获取div盒子本身的宽度和高度var oDiv = document.getElementById("oDiv");//获取盒子本身的高度var height = oDiv.offsetHeight;// alert(height);//获取盒子距离父级元素的高度var top = getStyle(oDiv,"top");// alert(top);//设置滚动条的监听事件window.onscroll = function(){//得到滚动条滚去的距离var scrollDemo = scroll();// console.log(scrollDemo.top);//定义一个变量保存总距离var sum = parseInt(top)+scrollDemo.top;console.log(sum);oDiv.style.top = sum+'px';};}</script> </head> <body><script type="text/javascript">for(var i = 1;i<=1000;i++){document.write(i+"<br/>");}</script><div id="oDiv"></div> </body> </html>案例三：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#oDiv{width: 100px;height: 100px;background-color: red;position: absolute;top: 100px;left:0px;/*盒子的圆弧度*/border-radius: 100%;}</style><script type="text/javascript">//方法：获取非行内式样式function getStyle(obj,name){//obj:操作哪一个标签 name:该标签的属性if(obj.currentStyle){//兼容IEreturn obj.currentStyle[name];}else{//兼容非IE浏览器---谷歌 火狐等等return getComputedStyle(obj,false)[name];}}/*** client浏览器窗口可视区域兼容性*/function client() {if (window.innerWidth != null) // ie9 + 最新浏览器{return {width: window.innerWidth,height: window.innerHeight}} else if (document.compatMode === "CSS1Compat") // 标准浏览器{return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight}}return { // 怪异浏览器width: document.body.clientWidth,height: document.body.clientHeight}}window.onload = function(){var oDiv = document.getElementById("oDiv");var flag = true;var flag2 = true;window.setInterval(function(){var left = parseInt(getStyle(oDiv,"left"));var top = parseInt(getStyle(oDiv,"top"));var width = (document.documentElement.clientWidth || document.body.clientWidth)-oDiv.offsetWidth;var height = (document.documentElement.clientHeight || document.body.clientHeight)-oDiv.offsetHeight;if(flag == true){left+=5;}if(left >= width){flag = false;}if(flag == false){left-=5;}if(left<=0){flag=true;}if(flag2 == true){top+=5}if(top >= height){flag2 = false;}if(flag2 == false){top-=5;}if(top<=0){flag2=true;}oDiv.style.left = left+'px';oDiv.style.top = top+'px';},50);};</script> </head> <body><div id="oDiv"></div> </body> </html>
JS与CSS交互及JavaScript 特效之四大家族相关推荐
- javascript（JS与css交互）详细介绍
一,JS与css交互基本概述 css有三种设置样式:行内样式,内部样式及外部样式 JavaScript获取css样式分两种情况:行内样式获取法和非行内样式获取法. 行内样式 通过element.sty ...
- html给背景架渐变,JS和CSS实现渐变背景特效的代码
这篇文章主要介绍了JS和CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现的漂亮渐变背 ...
- php背景特效代码,JS和CSS实现渐变背景特效的代码
这篇文章主要介绍了JS和CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现的漂亮渐变背 ...
- javascript（js与css交互）
(1)CSS样式有三种类型:行内样式.内部样式和外部样式 (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法. /*1 行内样式 通过element.styl ...
- java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法 随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
- JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的 下面的代 ...
- js,jquery,css,html5特效
js,jquery,css,html5特效 包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
- 响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互 补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
- jQuery基础与JavaScript与CSS交互-第五章
目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 - Ajax - Sliverlight ...
最新文章
- 我妈妈的优点：做事情特别细致
- 报错，但不影响运行ERROR: JDWP Unable to get JNI 1.2 environment, jvm-GetEnv() return code = -2...
- 表达式树练习实践：入门基础
- 笔记：Microservices for Java Developers
- Ibatis2.0使用说明(二)——配置篇
- C++之指针探究(二)：一级指针和一维数组
- Java程序员已经饱和了，还有必要培训Java编程嘛
- easyui下拉多选框的创建、获取值、赋值
- Java基础篇：如何使用continue语句
- 4. mac xdebug
- unity引用类型序列化_Unity 序列化 总结
- [转]被历史歪曲得最多的皇帝--隋炀帝杨广简介
- 《孽海记·思凡》唱段·风吹荷叶煞
- 计算机刷新的作用,为何要刷新BIOS？刷新BIOS能启到什么作用？
- 博客中Java开发的软硬件环境
- echarts柱状图 饼图 折线图
- python编程midi键盘按键_python 偷懒技巧——使用 keyboard 录制键盘事件
- 【离散系统】传递函数和状态空间方程离散化
- 快速掌握SAP BDC数据导入
- 高效记忆/形象记忆（05）定位法