滚动条、窗口、样式

1、滚动条距离

ie9以上及其它浏览器:window.pageXOffset / pageYOffset
IE9/IE8及以下:
document.body.scrollLeft/scrollTop
document.documentElement.scrollLeft/scrollTop
不常见: window.scrollX/scrollY

function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    } else {
        return {
            left: document.body.scrollLeft + document.documentElement.scrollLeft,
            top: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

2、浏览器可视区窗口尺寸(窗口的宽高)

(1)如何判定现在是标准模式还是怪异模式?
document.compatMode 输出 CSS1Compat 标准模式,BackCompat 怪异模式
(2)常规:window.innerWidth / innerHeight
IE9/IE8及以下:
IE标准模式: 如声明<!DOCTYPE html> 表示以h5文档
document.documentElement.clientWidth/clientHeight
IE怪异模式(混杂模式):html文档不带 <!DOCTYPE html> 使当前代码支持以前的浏览器版本
document.body.clientWidth / clientHeight

function getViewportSize() {
    if (window.innerWidth) {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    } else {
        if (document.compatMode === 'BackCompat') {
            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            }
        } else {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
    }
}

3、html文档的高度和宽度

常用方法,一般两种都支持:
document.body.scrollHeight/scrollWidth
document.documentElement.scrollHeight/scrollWidth

document.body.scrollWidth = window.innerWidth + window.pageXOffset;

function getScrollSize() {
    if (document.body.scrollWidth) {
        return {
            width: document.body.width,
            height: document.body.height
        }
    } else {
        return {
            width: document.documentElement.scrollWidth,
            height: document.documentElement.scrollHeight
        }
    }
}

5、获取元素距离窗口左上角的位置距离

offsetParent 返回有定位的父级元素
offsetTop/offsetLeft 返回当前元素上边距和左边距。只认父级定位元素,如果父级没有定位,会一直往上找,最终到body为止

function getElemDocPostion(el) {
    var parent = el.offsetParent,
        offsetLeft = el.offsetLeft,
        offsetTop = el.offsetTop;

    while(parent) {
        offsetLeft += parent.offsetLeft;
        offsetTop += parent.offsetTop;
        parent = parent.offsetParent;
    }

    return {
        left: offsetLeft,
        top: offsetTop
    }
}

6、操作滚动条

// 滚动条滚动到相应的位置,返回值为undefined
window.scroll(x, y);
window.scrollTo(x, y);

// 每次滚动相应的距离
window.scrollBy(x, y);

7、DOM 间接操作CSS

(1)DOM不能直接操作CSS, 只能通过标签的style属性来更改样式
(2)操作CSS

  • elem.style.xxx - 可读可写
  • 所有的属性都要用小驼峰命名
  • 值必须是字符串
  • 复合值一定要拆解赋值,连着写性能更低
  • 保留字前面加css,遇到float写为: elem.style.cssFloat = ‘left’;

(3)查看css属性的方法
elem.style 里面有CSSStyleDeclaration属性
(4)查看计算样式,常规:
window.getComputeStyle(elem, null)[prop];
window.getComputeStyle(elem, null).prop;
E8 及以下:
elem.currentStyle

(5)获取样式属性

function getStyles(el, prop) {
    if (window.getComputedStyle) {
        if (prop) {
            return parseInt(window.getComputedStyle(el, null)[prop]);
        } else {
            return window.getComputedStyle(el, null);
        }
    } else {
        if (prop) {
            return parseInt(el.currentStyle[prop]);
        } else {
            return el.currentStyle;
        }
    }
}

(6)offsetWidth / offsetHeight 访问物理宽高,会包含padding值
(7)操作伪元素:window.getComputeStyle(elem, ‘after’).width
(8)操作伪元素:最好方式是加类