javascript中几个兼容性问题

　　对原生js掌握不好，工作中一直是使用JQ，但是用原生js写程序一直是我的目标。前段时间因为时间比较充裕，在一个小项目上使用原生js写效果，不写不知道，一写吓一跳，各种问题都出来了，今天把部分问题整理一下，记录下来。

 

　　一、offsetWidth获取"display:none"元素的宽度时，宽度为0

　　解决办法：

　　　　1、用"visibility:hidden"代替"display:none"，此时offsetWidth能获取正确的值。

　　　　2、如果元素是使用定位的，可以通过定位把元素移出屏幕

 

　　二、js获取css属性值，一般使用style.属性名即可，但float是特殊属性，使用style.float获取属性值无效。

　　解决办法：标准浏览器使用obj.style.cssFloat，IE下使用obj.style.styleFloat

　　提供一个浏览器兼容设置float属性值的函数：

var setFloat = function(element, value) {  
    !document.all ? element.style.cssFloat = value : element.style.styleFloat = value;
};

 

　　三、使用style.属性名只能获取元素的内联样式，不能获取嵌入式样式和外部样式

　　解决办法：标准浏览器下使用getComputedStyle、IE下使用currentStyle，可获取经过计算的最终样式

　　提供一个浏览器兼容获取当前样式的函数（例如：display）：

var getDisplay = function(element) {  
    return document.all ? element.currentStyle.display : 
    document.defaultView.getComputedStyle(element, null).display;  
};

 

　　四、获取元素的上边界和左边界到页面的上边界和左边界的距离

　　有时我们需要获取元素的上边界和左边界到页面的上边界和左边界的距离，但是js只提供了offsetLeft和offsetTop获取元素边界到其包含元素的的边界距离。我们可以通过获取该元素及其所有父级元素的offsetLeft和offsetTop，所有的偏移量之和就是我们需要的值。

　　提供一个获取元素左边界到页面左边界的距离的函数：

var getPageLeft = function(element){
    var pageLeft = 0;
    while(element)
    {
        pageLeft += element.offsetLeft;
　　　　 element = element.offsetParent;
    }
    return pageLeft;          
};