三大家族（offset、scroll并扇、client）

三大家族（offset旬渠、scroll俱萍、client）

offset

用于獲取當(dāng)前元素尺寸

5個(gè)屬性

屬性	含義	值
offsetWidth	獲取對象自身的寬	width+border+padding
offsetHeight	獲取對象自身的高	height+border+padding
offsetLeft	距離最近的第一個(gè)有定位父級盒子左邊的距離，如無定位則以body為準(zhǔn)	從父標(biāo)簽的padding開始計(jì)算告丢，不包括border
offsetTop	距離最近的第一個(gè)有定位父級盒子上邊的距離枪蘑，如無定位則以body為準(zhǔn)	從父標(biāo)簽的padding開始計(jì)算，不包括border
offsetParent	返回當(dāng)前對象的父級（帶定位）盒子，無定位返回body	---

offset與style的區(qū)別
1. style.left只取行內(nèi)樣式岳颇，offsetLeft可以獲取到所有的樣式照捡。
2. offsetLeft可以返回?zé)o定位盒子的左距離；而style.left只能返回有定位的盒子距離话侧。
3. offsetLeft返回的是數(shù)字栗精，而style.left返回的是字符串，還帶單位px瞻鹏。
4. offsetLeft是只讀的烤黍；style.left是可寫的拯爽。
5. 若無指定當(dāng)前元素top，則style.top返回空字符串。

scroll

與滾動(dòng)事配合使用（onscroll）
4個(gè)屬性
1. document.body.scrollWidth =>網(wǎng)頁正文全文寬
  scrollWidth =>元素中能夠滾動(dòng)的內(nèi)容的寬度
2. document.body.scrollHeight =>網(wǎng)頁正文全文高
  scrollHeight =>元素中能夠滾動(dòng)的內(nèi)容的高度
3. document.body.scrollTop => 頁面被卷去的高
4. document.body.scrollLeft => 頁面被卷去的寬

瀏覽器兼容

嚴(yán)格模式：document.compatMode = CSS1Compat
怪異模式：document.compatMode = BackCompat
兼容方式：高版本瀏覽器 || 嚴(yán)格模式 || 怪異模式
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;

封裝成工具類

獲取被卷去的寬或者高

scroll:function () {
    if(window.pageYOffset !== null){
        return{
            "top":window.pageYOffset,
            "left":window.pageXOffset
        }
    }else if (document.compatMode === 'CSS1Compat'){
        return {
            "top":document.documentElement.scrollTop,
            "left":document.documentElement.scrollLeft
        }
    }
    return {
        "top":document.body.scrollTop,
        "left":document.body.scrollLeft
    }
}

獲取能夠滾動(dòng)的內(nèi)容的寬或者高

scrollText:function () {
    if (document.compatMode === 'CSS1Compat'){
        return {
            "height":document.documentElement.scrollHeight,
            "width":document.documentElement.scrollWidth
        }
    }
    return {
        "height":document.body.scrollHeight,
        "width":document.body.scrollWidth
    }
}

client

與窗口尺寸事件配合使用（onresize）

4大屬性

屬性	值
clientWidth	可視區(qū)域?qū)挘簑idth + padding
clientHeight	可視區(qū)域高：height + padding
clientLeft	盒子左邊邊框?qū)?/td>
clientTop	盒子上邊邊框?qū)?/td>

獲取屏幕可視區(qū)域（兼容模式）
ie9以上版本最新瀏覽器 || 標(biāo)準(zhǔn)模式 || 怪異模式
var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var clientHeigth = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

附：事件

拿到事件

btn.addEventListener("click", function (ev1) {
        // 兼容方式拿到事件對象
          var e = ev1 || window.event;
}

事件對象的屬性和用途

屬性	用途
clientX	光標(biāo)相對于網(wǎng)頁的水平位置
clientY	光標(biāo)相對于網(wǎng)頁的垂直位置
type	事件的類型
target	改事件被傳送到的對象
screenX	光標(biāo)相對于該屏幕的水平位置
screenY	光標(biāo)相對于該屏幕的垂直位置
pageX	光標(biāo)相對于該網(wǎng)頁的水平位置（包括卷去的部分隅肥，不適用于IE）
pageY	光標(biāo)相對于該網(wǎng)頁的垂直位置（包括卷去的部分乓序，不適用于IE）
width	該窗口或框架的寬度
height	該窗口或框架的高度
data	返回拖拽對象的URL字符串

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者