JS与CSS交互详细介绍

一. 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 ;(主要用这种)