红宝书笔记——JavaScript DOM2和DOM3

样式：
访问元素的样式：

var myDiv=document.getElementById('oDiv');
myDiv.style.backgroundColor='red';

当设置多个样式：

var myDiv=document.getElementById('oDiv');
myDiv.style.cssText="width: 200px;background-color: red;";

另外还能通过getPropertyValue()和getPropertyCssValue()方法来访问css样式。

var myDiv=document.getElementById('oDiv');
var prop,value,i;
var len=myDiv.style.length;
for(i=0;i<len;i++){
    prop=myDiv.style.item(i);
    value=myDiv.style.getPropertyValue(prop);
    alert(prop+":"+value);
}
var myDiv=document.getElementById('oDiv');
var prop,value,i;
var len=myDiv.style.length;
for(i=0;i<len;i++){
    prop=myDiv.style.item(i);
    value=myDiv.style.getPropertyCSSValue(prop);
    alert(prop+":"+value.cssText+"("+value.cssValueType+")");
}

移除样式：removeProperty()。

元素大小
偏移量：
offsetHeight：元素在垂直方向上占用的空间大小
offsetWidth：元素在水平方向上占用的空间大小
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
要知道某个元素在页面上的偏移量，将这个元素的offsetLeft 和offsetTop 与其offsetParent的相同属性相加，如此循环直至根元素，就能得到一个基本准确的值。

function getElementLeft(element){
    var actualLeft=element.offsetLeft;
    var current=element.offsetParent;
    while(current!==null){
        actualLeft+=current.offsetLeft;
        current=current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var actualTop=element.offsetTop;
    var current=element.offsetParent;
    while(actualTop!==null){
        actualTop+=current.offsetTop;
        current=current.offsetParent;
    }
    return actualTop;
}

客户区大小：元素内容及其内边距所占据的空间大小。
clientWidth 和clientHeight。

function getViewport(){
    if(document.compatMode=="BackCompat"){
        return{
            width:document.body.clientWidth;
            height:document.body.clientHeight;
        };
    }else{
        return{
            width:document.documentElement.clientWidth;
            height:document.documentElement.clientHeight;
        };
    }
}

滚动大小：包含滚动内容的元素的大小。
scrollTop：在被隐藏在内容区域上方的像素数。
scrollLeft：在被隐藏在内容区域左侧的像素数。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
srcollHeight：在没有滚动条的情况下，元素内容的总高度。
注意：在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果。

function getViewport(element){
    var docHeight,docWidth;
    if(document.compatMode=="BackCompat"){
        docWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
        docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
    }else{
        docWidth=Math.max(document.body.scrollWidth,document.body.clientWidth);
        docHeight=Math.max(document.body.scrollHeight,document.body.clientHeight);
    }
}

可以通过改变scrollTop和scrollLeft的值来确定元素当前滚动的状态。
scrollTop=0：回到顶部

确定元素大小：getBoundingClientRect()方法。包含四个属性：top,left,right,bottom。

function getBoundingClientRect(element){
    if(typeof arguments.callee.offset!="number"){
        var scrollTop=document.documentElement.scrollTop;
        var temp=document.createElement("div");
        temp.style.cssText="position: absolute;left:0;top:0;";
        document.body.appendChild(temp);
        arguments.callee.offset=-temp.getBoundingClientRect().top-scrollTop;
        document.body.removeChild(temp);
        temp=null;
    }
    var rect=element.getBoundingClientRect();
    var offset=arguments.callee.offset;
    return{
        left:rect.left+offset,
        right:rect.right+offset,
        top:rect.top+offset,
        bottom:rect.bottom+offset
    };
}

为了跨浏览器实现：

function getElementLeft(element){
    var actualLeft=element.offsetLeft;
    var current=element.offsetParent;
    while(current!==null){
        actualLeft+=current.offsetLeft;
        current=current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var actualTop=element.offsetTop;
    var current=element.offsetParent;
    while(actualTop!==null){
        actualTop+=current.offsetTop;
        current=current.offsetParent;
    }
    return actualTop;
}
function getBoundingClientRect(element) {
    var scrollTop = document.documentElement.scrolltop;
    var scrollLeft = document.documentElement.scrollleft;
    if(element.getBoundingClientRect) {
        if(typeof arguments.callee.offset != "number") {
            var scrollTop = document.documentElement.scrollTop;
            var temp = document.createElement("div");
            temp.style.cssText = "position: absolute;left:0;top:0;";
            document.body.appendChild(temp);
            arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
            document.body.removeChild(temp);
            temp = null;
        }
        var rect = element.getBoundingClientRect();
        var offset = arguments.callee.offset;
        return {
            left: rect.left + offset,
            right: rect.right + offset,
            top: rect.top + offset,
            bottom: rect.bottom + offset
        };
    }else{
        var actualLeft=getElementLeft(element);
        var actualTop=getElementTop(element);
        return{
            left:actualLeft-scrollLeft,
            right:actualLeft+element.offsetWidth-screenLeft,
            top:actualTop-scrollTop,
            bottom:actualTop+element.offsetHeight-screenTop
        };
    }
}