前端 开发语言 JS与CSS交互及JavaScript 特效之四大家族

一、JS获取与CSS交互

    问题:     （1）CSS样式有三种类型：行内样式、内部样式和外部样式     （2）JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。

    1.1 行内样式            通过element.style.attr（元素.style.属性）即可获取可设置

   导航条设置：

    1.2 非行内样式获取法，因浏览器的不同又分为两种，即基于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）     三大系列：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)                               

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

案例一：

案例二：

案例三：

文章来源

 您阅读本篇文章共花了：