一、JS与css交互的基本介绍
1、问题引入
css样式设置三种方式： 行内式、内部式和外部式。
JavaScript获取css样式有两种情况：行内样式和非行内样式
2、行内样式
通过element.style.attr(元素.style)可获取可设置
3、非行内式
因浏览器的不同，一种基于IE浏览器和非IE浏览器
基于IE的非行内获取：element.currentStyle['attr']
基于非IE的非行内获取：getComputedStyle(element.null/伪类)[attr]
【PS】非行内的只能获取不能设置*
//函数封装，方便调用：兼容所有浏览器
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 (事件被触动时，鼠标和键盘的状态，通过属性控制)
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 可读写。（只读是获取值，可写是赋值）- 如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。（style.left在等号的左边和右边还不一样。左边的时候是属性，右边的时候是值。）
2、client系列
client 客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以得到元素的边框大小，元素大小。
clientWidth 和 clientHeight
clientWidth：获取网页可视区域宽度clientHeight：获取网页可视区域高度
//奇怪的浏览器
var w1=document.body.clientWidth;
//标准浏览器
var w2=document.documentElement.clientWidth;
//IE9+
window.innerWidth;
clienetX 和 clientY
clientX:鼠标距离可视区域左侧距离（event调用）clientY:鼠标距离可视区域上侧距离（event调用）
clientTop 和 clientLeft
获取盒子的border的宽高，
获取屏幕的可视区兼容的写法
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;
}
}
未声明DTD时
document.body.scrollTop
声明DTD时
document.documentElement.scrollTop
以上支持的
window.pageYOffset
3、Scroll系列
scroll滚动的，使用相关属性可得到改元素的大小。滚动距离等。
ScrollWidth 和 ScrollHeight(不包border)
检测盒子的宽高。（调用者：节点元素、属性）
盒子内容的宽高。（如有内容超出，显示内容的高度）
4、event事件对象
一个事件中的内置对象，内部装了很多关于鼠标和事件本身的信息。
event的获取
在事件绑定的函数中，加参数，这个参数就是ecent
Box.onclick=function (event){
}
兼容获取方式
- 不写参数直接使用event
- 写参数，但是参数为event
scrennX 、pageX 和clientX 的区别event ||window.event
pageY /pageX:鼠标位于整个页面的顶部和左侧部分的距离。（页面）pcreenY /pcreenX:鼠标位于屏幕的上方和左侧的距离。（屏幕）clientY /clientX:鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
pageY 和pageX的兼容写法
页面的位置=看得见+看不见
pageX/Y=event.clientX/Y+scroll().top/scroll().left
5、三大系列区别
- Width 和 height
clientWidth=width+padding
clientHeight=height+padding
offsetWidth=width+padding+border
offsetHeight=height+padding+border
scrollWidth=内部宽度（不包含border）
scrollHeight=内部高度（不包含border）
2.top 和 left
`offsetTop`/`offsetleft`: 调用者：任意元素。（盒子为主） 作用：距离父系盒子中带有定位的距离 `scrollTop`/`scrollLeft`:（盒子也可以调用，必须有滚动条） 调用者： document.body.scrollTop/...(window) 作用：浏览器无法显示的部分（被卷去的部分） `clientY`/`clientX`:(clientTop/clientLeft 值得是border) 调用者：event.clientX(event) 作用：鼠标距离浏览器可视区域的距离（左、上）
6、获取屏幕宽高
window.screen.width
window.screen.Height
【ps】分辨率是屏幕图像的精密度，指显示器的像素有多少。
