一. JS与CSS交互基本介绍
1.1 问题引入
- css样式设置有三种方式:行内样式,内部样式和外部样式。
- JavaScript获取css样式时分为两种情况:行内样式获取罚和非行内样式获取法。
1.2 行内样式
通过element.style.attr(元素.style.属性)即可获取。
1.3 非行内样式
- 因浏览器的不同又分为两种,即基于IE浏览器的 和 非IE浏览器的 如谷歌火狐等。
- 基于IE浏览器的非行内样式获取法:通过
element.currentStyle[attr]
- 基于非IE浏览器的非行内获取法:通过
getComputedStyle(element.null / 伪列)[attr]
注意事项:非行内样式获取法,只能获取不能设置。
// 函数封装,方便多次调用:兼容所有的浏览器 ,包括IE6 7 function getStyle (obj,name){// obj:操作哪一个标签 name:该标签的属性 if(obj.currentStyle){ //兼容IE return obj.currentStyle[name]; }else{ //兼容非IE浏览器 如谷歌,火狐等 return getComputedStyle(obj,false)[name]; } }
二. JavaScript特效之四大家族
- 三大系列:offset ,scroll ,client
- 事件对象:event (事件被触动时,鼠标和键盘的状态)(通过属性控制)
2.1 offset 系列
offset :偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小(宽度高度)
offsetWidth和offsetHeight
- 检测盒子自身宽高 + padding + border
offsetWidth = width + padding + border offsetHeight = height + padding + border
offsetLeft 和 offsetTop
- 检测距离父盒子有定位的左/上的距离
返回距上级盒子中带有定位的盒子左边和上边的距离。
与盒子本身有无定位无关。
如果父级都没有定位则以body为准。
offsetLeft从父级的padding开始算,父级的border不算。
在父盒子有定位的情况下,offsetLeft == style.left(去掉px)
offsetLeft 和 style.left 的区别
- 最大区别在于offsetLeft可以返回没有定位盒子的左侧的距离的位置。style.left不可以。
- offsetLeft返回的是数字,style.left返回的是字符串,除了数字外还带有单位:px
offsetTop 和 style.top 的区别
- offsetTop只读,而style.top可读写。(只读是获取值,可写是赋值)
- 如果没有给HTML元素指定过top样式,则style.top返回的是空字符串。(style.top在等号的左边和右边不一样。左边是属性,右边是值)
2.2 client事件
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小,元素大小等。
clientWidth 和 clientHeight
clientWidth:获取网页可视区域宽度 clientHeight:获取网页可视区域高度 调用者不同,意义不同: 盒子调用,指盒子本身;body / html 调用,指可视区域大小。 var w1 = document.body.clientWidth; console.log("怪异浏览器====>:"+w1) var w2 = document.documentElement.clientWidth; console.log("标准浏览器====>"+w2) console.log("IE9+====>"+window.innerWidth);
clientX 和 clientY
clientX : 鼠标距离可视区域左侧距离(event调用) clientY : 鼠标距离可视区域上侧距离(event调用)
clientTop 和 clientLeft
获取盒子的 border 宽高
2.3 Scroll 系列
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等。
ScrollWidth 和 ScrollHeight (不包括border)
检测盒子的宽高 (调用者 节点属性,属性) 盒子内容的宽高 (如果有内容超出,显示内容的高度) IE567可以比盒子小。IE8 + 火狐谷歌不能比盒子小。
scrollTop 和 scrollLeft
网页被浏览器遮挡的头部和左边部分。 被卷去的头部和左边部分。
有兼容性问题
未声明 DTD 时(谷歌只认识他) document.body.scrollTop 已经声明DTD 时(IE678只认识他) document.documentElement.scrollTop 火狐/谷歌/ie9+以上支持的 window.pageYOffset
2.4 event事件对象
- 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息。
- 所有浏览器都支持event对象,但支持的方式不同。比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。
- (类似Date)普通浏览器支持event(带参,任意参数)IE678支出window.event(无参,内置)
总结 :他是一个事件中的内置对象,内部装了很多关于鼠标和事件本身的信息。
事件event对象的获取
IE678中,window.event 在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event. Box.onclick = function (aaa){ //aaa就是event }
兼容获取方式
- 不写参数直接使用event 。
- 写参数,但是参数为event 。
var event = event || window.event ;(主要用这种)