JS与CSS交互

一、JS与CSS交互基本介绍

1.1CSS样式与Js样式

• CSS样式设置有三种方式：行内样式、内部样式和外部样式

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

1.2行内样式获取法

1.2.1 document.getElementById(elementId).style.样式属性值

    <divclass="oBox"id="test"style="background-color: yellow;">内容</div>
    vardivObj=document.getElementById("test");
    varobjBC=divObj.style.backgroundColor;
    console.log(objBC);//yellow

1.2.2 document.getElementById(elementId).className.样式属性值

    vardivObj=document.getElementById("test");
    console.log(divObj.className);
    divObj.className="oBox oBox2"

1.3 非行内样式

• 考虑兼容性问题，因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏览器的如谷歌火狐等。

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

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

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

    //函数封装，方便多次调用：兼容所有的浏览器，包括IE6  7
    functiongetStyle(obj, name) { //obj:操作哪一个标签 name:该标签的属性
        if (obj.currentStyle) { //兼容IE
            returnobj.currentStyle[name];
        } else { //兼容非IE浏览器---谷歌  火狐等等
            returngetComputedStyle(obj, false)[name];
        }
    }

二、JavaScript 特效之四大家族

• 三大系列：offset、scroll、client

• 事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）

2.1 offset系列

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

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

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

常用属性

属性	描述
element.offsetParent	返回带有定位的父亲，否则返回的是body
element.offsetTop	返回元素相对带有定位父元素上方的偏移，若没有父亲或父亲不带单位，则以body为准
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移，若没有父亲或父亲不带单位，则以body为准
element.offsetWidth	返回自身包括padding、边框、内容区的宽度
element.offsetHeight	返回自身包括padding、边框、内容区的高度

[注意：element.parentNode返回的是最近一级的父元素，不管该父元素有无定位]

offset系列和style的区别

• offset可以得到任意样式表中的样式值；style只能得到行内样式表中的样式值

• offset系列获得的数值是没有单位的；style.width获得的是带有单位的字符串

• offsetWidth包含padding+ border+width；style.width获得不包含padding和border的值

• offsetWidth 等属性是只读属性，只能获取不能赋值；style.width是可读写属性，可以获取也可以赋值

• 所以，我们想要获取元素大小位置，用offset更合适；我们想要给元素更改值，则需要用style改变

2.2 client 系列

client：客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

常用属性

属性	描述
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回值不带单位

[client和offset最大的区别是返回宽度和高度时，offset包括边框，client不包括边框。]

clientWidth 和 clientHeight

    clientWidth：获取网页可视区域宽度（两种用法）
    clientHeight：获取网页可视区域高度（两种用法）
    调用者不同，意义不同：    
    盒子调用，指盒子本身；body/html调用，指可视区域大小。
    ​
    varw1=document.body.clientWidth;
    console.log("怪异浏览器====》: "+w1);
    varw2=document.documentElement.clientWidth;
    console.log("标准浏览器====>"+w2);
    console.log("IE9+====>"+window.innerWidth);

clientX 和 clientY

clientX：鼠标距离可视区域左侧距离（event调用）

clientY：鼠标距离可视区域上侧距离（event调用）

获取屏幕的可视区兼容写法

    functionclient() {
        if (window.innerWidth!=null) // ie9 +  最新浏览器
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        } elseif (document.compatMode==="CSS1Compat") // 标准浏览器
        {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
        return { // 怪异浏览器
            width: document.body.clientWidth,
            height: document.body.clientHeight
    ​
        }
    }

2.3 Scroll 系列

scroll：滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

常用属性

属性	描述
element.scrollTop	返回被卷去的上侧距离
element.scrollLeft	返回被卷去的左侧距离
element.scrollWidth	返回自身实际内容的宽度，不含边框
element.scrollHeight	返回自身实际内容的宽度，不含边框

[返回值都不带单位。]

页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。

有兼容性问题

    未声明DTD时（谷歌只认识他）
    document.body.scrollTop
    已经声明DTD时（IE678只认识他）
    document.documentElement.scrollTop
    火狐/谷歌/ie9+以上支持的
    window.pageYOffset
    vartop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;  
    vartop=document.documentElement.scrollTop+document.body.scrollTop;  

三大系列总结

• offset系列经常用于获得元素位置offsetLeft、offsetTop。

• client经常用于获取元素大小clientWidth、clientHeight。

• scroll经常用于获取滚动距离 scrollTop 、scrollLeft。

• 注意页面滚动的距离通过window.pageXoffset获得。

2.4 event 事件对象

• 在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

• 所有浏览器都支持event对象，但支持的方式不同。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。

• （类似Date）普通浏览器支持 event（带参，任意参数）ie 678 支持 window.event（无参，内置）

总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。

事件对象 event 的获取

    IE678中，window.event 
    在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.
    Box.onclick = function (aaa){   //aaa就是event     }

兼容获取方式

• 不写参数直接使用event;

• 写参数，但是参数为event

var event = event || window.event;(主要用这种)

screenX、pageX 和 clientX 的区别

    pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
    pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
    clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

pageY 和 pageX 的兼容写法

在页面的位置=看得见的+看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left