javascript（JS与css交互）详细介绍

一，JS与css交互基本概述

• css有三种设置样式：行内样式，内部样式及外部样式

• JavaScript获取css样式分两种情况：行内样式获取法和非行内样式获取法。

行内样式

通过element.style.attr(元素.style.属性) 即可获取设置

非行内样式

• 因浏览器的不同又分为两种，即基于IE浏览器的

和 非IE浏览器的如谷歌火狐等。

• 基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']

• 基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]

【注意事项】非行内样式获取法，只能获取不能设置。

二，javaScript四大特性家族(offset/scroll/client/event )

三大系类：offset,scroll,client

事件对象：event系类(事件被触发时，鼠标和键盘的状态) （通过属性控制）

2.1 offset系类

offset：偏移量使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

• .获得元素距离带有定位父元素的位置

• .获得元素自身的大小（宽度高度）

（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)

       //获取指定元素的父级元素对象，如果父级对象没有定位直接指向body
            console.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);//200

2.3 Scroll系类

scroll翻译过来就是滚动的，我们使用scroll系类的相关属性可以

动态得到该元素的大小滚动距离等

（1） scroll Width和scroll Height（不包括border）

检测盒子的宽度。（调用者：节点元素。属性）

盒子内容的宽度。（如果有内容超出了，显示内容的高度）

IE567可以比盒子小。IE8+火狐谷歌不能比盒子小

2）scrollTop 和 scrollLeft

网页，被浏览器遮挡的头部和左边部分。

被卷去的头部和左边部分。

（3）有兼容性问题

① 未声明 DTD 时（谷歌只认识他）

document.body.scrollTop

② 已经声明DTD 时（IE678只认识他）

document.documentElement.scrollTop

③ 火狐/谷歌/ie9+以上支持的

           //获取被滚动条滚去的距离
             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.even