前端day15-JS(WebApi)学习笔记(三大家族、事件对象、getComputedStyle)

原创

帅的一麻皮

修改于 2020-05-06 17:50:07

6770

修改于 2020-05-06 17:50:07

文章被收录于专栏：前端与Java学习

01-getComputedStyle()获取元素一切样式属性

1.1getComputedStyle(param1,param2)：获取元素一切样式属性

第一个参数param1：元素
第二个参数param2：伪元素一般不传或者传null
返回值： CSSStyleDeclaration 对象：存储元素一切样式属性

三种语法的区别：

1.点语法特点：

只能获取行内属性，无法获取行外属性
获取的是string，带单位
既可以获取也可以修改

2.getComputedStyle

既可以获取行内，也可以获取行外
获取的是string，带单位
只能获取不能修改

3.attribute

只能获取行内，和行内自定义属性
可以getAttribute获取也可以通过setAttribute修改
一般操作的是自定义属性，可读性更高

02-三大家族(offset、scroll、client)

2.1-offset家族(元素自身大小)

1.offset属性家族：获取元素真实的宽高和位置

offsetWidth、offsetHeight、offsetParent、offsetLeft、offsetTop

2.之前学习的通过style属性获取宽高的特点

1.只能获取行内的宽高
2.获取到的值是一个string类型，并且带有px
3.获取到的只有宽高，不包含padding、border（行内写的是什么，获取的就是什么）
4.既可以读取，也可以设置

3.offsetWidth与offsetHeight：获取的是元素的实际宽高= width+border+padding

1.可以获取行内以及内嵌的宽高
2.获取到的值是一个number类型，不带单位
3.获取的宽高包含border和padding
4.只能读取，不能设置修改

4.offsetLeft和offsetTop

offsetLeft:获取自己左外边框与offsetParent的左内边框的距离
offsetTop:获取自己上外边框与offsetParent的上内边框的距离

5.offsetParent

offsetParent:获取最近的定位父元素 （自己定位参照的父元素）

注意点：

1.如果元素自身是固定定位（fixed），则定位父级是null

2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body

3.body的定位父级是null

2.2-scroll家族（元素内容大小）

scroll家族：（与offset家族类似，不带单位，number类型）

scrollWidth和scrollHeight：元素内容真实的宽高
scrollLeft和scrollTop：元素在滚动时超出内容区域的部分
onscroll:元素的滚动条事件，只要滚动就会触发

获取网页滚动距离

1.如何获取页面的HTML元素和body元素
- HTML:document.documentElement;
- body: document.body;
2.获取整个页面的滚动事件：window.onscroll
- 没有兼容性
3.获取页面的scrollTop和scrollLeft:存在浏览器兼容性
- 谷歌/火狐： window.pageXOffset （左） window. pageYOffset（上）
- IE浏览器： document.documentElement.scrollLeft/Top
- 某些浏览器:document.body.scrollLeft/Top

//封装一个获取页面滚出去距离的浏览器兼容性函数：利用逻辑或的短路
    function getPageScroll (  ) {
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        return {
            scrollLeft : scrollLeft,//左边是对象属性名，右边是属性值
            scrollTop : scrollTop
        }
    }

2.3-client家族（元素可视区域大小）

clientWidth/clientHeight：获取可视区域的宽高
clientTop/clientLeft:不常用，其实就是左边框border-left和上边框border-top

1.监听浏览器窗口变化的事件: window.onresize()
2.获取页面的可视区域
- 存在浏览器兼容问题，兼容情况与scroll家族基本类似
- 谷歌/火狐： window.innerWidth window. innerHeight
- IE浏览器： document.documentElement.clientWidth/Height
- 某些情况下(把<!DOCTYPE html>删掉):document.body.clientWidth/Height

//封装一个获取页面的可视区域大小
getClientSize = function (  ) {
   return {
         clientWidth : window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
         clientHeight : window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0,
   }
}

03-事件对象介绍（获取事件对象）

1.什么是事件对象event:当某一个事件被触发时（例如点击事件），此时浏览器会记录触发时的某些信息，例如你是在哪个位置点击的，你在点击的时候是直接鼠标左键点击的，还是鼠标左右键一起点击（骚操作）的等等浏览器把这些所有的信息放到一个变量中存储，这个变量的数据类型是对象，所以称之为事件对象
2.如何获取事件对象：只需要在事件函数中添加一个参数即可
- 我们在注册事件的时候会写一个函数告诉浏览器这个事件被触发就调用这个函数，浏览器调用这个函数的时候会传递一个参数给你，这个参数就是事件对象
- 事件对象的获取存在浏览器兼容性问题
  - 谷歌、火狐：随便写一个形参即可（通常要么是event要么是e）
  - IE8及之前：只能用window.event获取
  - 解决方案： e = e || window.event

ele.onclick = function ( e ) {
        //IE8及之前用window.event获取，可以用逻辑或的短路运算解决浏览器兼容性问题
        e = e || window.event;
        console.log ( e );
    }

3.1-事件对象三大坐标系

1.电脑屏幕的左上角，距离你触发事件的那一点的x值和y值
- e.screenY
- e.screenX
2.浏览器可视区域，距离触发事件的那一点的x值和y值
- e.clientY
- e.clientX
3.页面的左上角（哪怕页面滚走了，还是页面左上角），距离触发事件的那一点的x值和y值
- e.pageX
- e.pageY
  - 浏览器兼容问题：IE8及之前不支持

 //事件对象里面的常用的三个坐标
    var box = document.getElementById("box");
    box.onclick = function (e) {
        e = e || window.event;
        //1.电脑屏幕的左上角，距离你触发事件的那一点的x值和y值。
        console.log("e.screenX:"+e.screenX+"---e.screenY:"+ e.screenY);
        //2.浏览器可视区域，距离触发事件的那一点的x值和y值
        console.log("e.clientX:"+e.clientX+"---e.clientY:"+ e.clientY);
        //3.页面的左上角（哪怕页面滚走了，还是页面左上角），距离触发事件的那一点的x值和y值。
        //浏览器兼容问题：IE8及之前不支持
        console.log("e.pageX:"+e.pageX+"---e.pageY:"+ e.pageY);

        console.log ( getPagePoint ( e ).pageX, getPagePoint ( e ).pageY );
    }

    //pageX和pageY的兼容
    //pageX/Y坐标系相对于页面左上角，实际上就是界面滚定出去的距离 + 可视区域的距离
    function getPagePoint ( e ) {
        e = e || window.event;//事件对象兼容
        return {
            pageX : e.pageX || getPageScroll().scrollLeft + e.clientX,
            pageY : e.pageY || getPageScroll().scrollTop + e.clientY,
        };
    };

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

node.js