美文网首页
JS中的offset家族 scroll家族 client家族 事

JS中的offset家族 scroll家族 client家族 事

作者: 赵xiao赛 | 来源:发表于2018-08-14 09:52 被阅读0次
    js中有一套方便的获取元素尺寸的办法就是offset家族:
    offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族
    
    offsetWidth = width + padding + border
    offsetHeight = height + padding + border
    
    offsetLeft 和 offsetTop:
    返回距离上级带有定位的盒子左边的位置,如果父级元素没有定位,则以body为准
    offsetLeft从父亲的padding开始算,父亲的border不算
    
    offsetParent:返回该对象的带有定位的父级,如果当前元素的父级元素没有
    进行CSS定位,则offsetParent为body.如果当前元素的父级元素中有定位,则
    取最近的父级元素
    
    offsetLeft和style.left的区别
    一、最大区别在于offsetLeft可以返回没有定位的盒子距离左侧的位置
    而style.left不可以。
    二、offsetTop返回的是数字,而style.top返回的是字符串(24px),除了数字外,还
    带有单位。
    三、offsetTop只读,而style.top读写
    四、如果没有给HTML元素设置top样式,style.top返回的是空字符串。
    
    scroll家族主要包括scrollWidth、scrollHeight scrollLeft scrollTop onscroll事件
    scrollWidth/scrollHeight是指内容的高度
    scrollLeft/scrollTop指被卷去的左侧和头部(浏览器无法显示的部分)
    一般调用document.body.scrollTop
    on scroll滚动事件(window.onscroll = func)
    屏幕每滚动一次,哪怕只有一个像素也会触发这个事件。这样就可以检测屏幕滚动了
    只能有一个写了多个以最后一个为准,同理 window.onload
    
    未声明 DTD(谷歌只认识他)(IE9+认识他)document.body.scrollTop
    已经声明DTD(IE678只认识他)(IE9+任何时候)
       document.documentElement.scrollTop
    火狐/谷歌/ie9+以上支持的(不管DTD)
       window.pageYOffset
    
    滚动到指定位置:window.scrollTo 把内容滚动到指定的坐标
    scrollTo(xpos,ypos)
    xpos    必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
    ypos    必需。要在窗口文档显示区左上角显示的文档的 y 坐标
    
    clientWidth:获取网页可视区域宽度
      clientHeight:获取网页可视区域的高度
      如果是盒子调用,指的是盒子本身
    如果是body/html调用,指的是可视区域的大小
    clientX:鼠标距离可视区域左侧距离(event调用)
    clientY:鼠标距离可视区域上侧距离(event调用)
    clientTop/clientLeft盒子的border宽高
    
    client家族之:检浏览器宽/高度(可视区域)
    ie9及其以上的版本
    window.innerWidth/Height  
    标准模式(有DTD)(“CSS1Compat”)
    document.documentElement.clientWidth
    document.documentElement.clientHeight
    怪异模式 (没有DTD)
    document.body.clientWidth
    document.body.clientHeight
    
    三个家族的区别:
    区别1:(offset/scroll/client宽高)
    
    clientWidth  = width  + padding
    clientHeight = height + padding
    offsetWidth  = width  + padding + border
    offsetHeight = height + padding + border
    scrollWidth   = 内容宽度(不包含border)
    scrollHeight  = 内容高度(不包含border)
      区别2:(offset/scroll/client上下)
    offsetTop/offsetLeft :
            调用者:任意元素。(盒子为主)
            嘛作用:距离父系盒子中带有定位的距离。
    scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)
            调用者:document.body.scrollTop/.....(window)
            嘛作用:浏览器无法显示的部分(被卷去的部分)。
    clientY/clientX:(clientTop/clientLeft 值的是border)
            调用者:event.clientX(event)
            嘛作用:鼠标距离浏览器可视区域的距离(左、上)。
    
    触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。
    比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)
    普通浏览器支持 event(传参)
    ie 678 支持 window.event(无参)
    
    常见属性
    clientX/clientY  
    当前窗口的左上角为基准点
    pageX/pageY低版本浏览器(IE67)不支持
    以当前文档的左上角为基准点   
    screenX/screenY
    当前屏幕的左上角为基准点
    

    相关文章

      网友评论

          本文标题:JS中的offset家族 scroll家族 client家族 事

          本文链接:https://www.haomeiwen.com/subject/iejmbftx.html