JS和CSS的交互

一、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

  event ||window.event
  

  scrennX 、pageX 和clientX 的区别

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

pageY 和pageX的兼容写法

页面的位置=看得见+看不见
pageX/Y=event.clientX/Y+scroll().top/scroll().left

5、三大系列区别

1. 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】分辨率是屏幕图像的精密度，指显示器的像素有多少。

上一章：DOM编程进阶（JS）
下一章：表单验证（JS）