最理想的方式，无非就是统一使用onload来检测link元素是否加载完毕。但是事不与程序猿人愿~ 但是兼容办法还是有的。

在IE、Opera下，可以直接使用onload、onreadystatechange这两种方式都可以检测link元素是否加载完成，跟检测script一样的原理。

在Chrome、Safari等基于Webkit内核的浏览器下，估计就要监控document.styleSheets.length的变化了。Webkit内核的浏览器在处理document.styleSheets.length的方式是这样的，当加载完了一个link之后，length就会加1，那么这样的话，就可以使用setInterval的方式来检测length的变化了，对于同时检测多个link是否加载完成的方式也可以利用这个，看length增加了多少。《测试用例》示例如下：

[javascript]
var link = document.createElement("link");
var cn = document.styleSheets.length;

var ti = setInterval(function() {
if (document.styleSheets.length > cn) {
alert("CSS loaded");
clearInterval(ti);
}
}, 10);

link.href="http://www.ilovejs.net/lab/css.php";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
[/javascript]

但是在Firefox下，情况就有些恶心了，所使用到的方式跟上面的两类浏览器的处理方式都不太相同。对于document.styleSheets.length的处理也不同于Webkit，它的处理方式是只要link元素一附加到document之后，length就会立即加1，而不管css文件是否加载完毕（测试用例如上面的链接）。为此，对于Firefox的处理方式，使用style标签，而不是link，并且使用传统的@import的方式，通过判断style.sheet.cssRules是否存在来检测css文件是否加载完成，具体如下所示《测试用例》：

[javascript]
var head = document.getElementsByTagName("head")[0];

var style = document.createElement(‘style’);
//加载css.php文件，需要2秒之后才会返回响应内容
style.textContent = ‘@import "http://www.ilovejs.net/lab/css/css.php"’;
style.rel="stylesheet";

var fi = setInterval(function() {
try {
style.sheet.cssRules; // 这句是关键，在css加载完成的时候，style元素就会有这么个对象。

alert("CSS loaded");

clearInterval(fi);

} catch (e){}

}, 10);

head.appendChild(style);
[/javascript]

为此，想要写一个兼容性的检测CSS文件是否加载完成的代码，估计看起来会比较丑陋，差异大，处理的方式各异，期待onload统一的那一天咯~~

offsetParent有四个方法是比较常用的：offsetLeft，offsetTop，offsetWidth，offsetHeight。下面我来说明offsetLeft和offsetTop方法的含义。

offsetTop和offsetLeft分别是元素在offsetParent上下文中的水平和垂直偏移量，它在现代浏览器中都比较准确。但是ie6,ie7在计算的时候会多出2个像素的长度,大家可以使用下面提供的函数来测试。下面是封装的几个函数：

[javascript]
//获取DOM元素在可见区域的X坐标
function pageX(elem){
//如果当前元素还存在offsetParent，就递归叠加，下面的同理
return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
//获取DOM元素在可见区域的Y坐标
function pageY(elem){
return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}
//获取DOM元素相对于parentNode的X坐标
function parentX(elem){
//鉴于有些浏览器对于offsetParent指向不准确的进行判断是否跟元素的parentNode相等，下同。
return elem.offsetParent == elem.parentNode ? elem.offsetLeft : pageX(elem) – pageX(elem.parentNode);
}
//获取DOM元素相对于parentNode的Y坐标
function parentY(elem){
return elem.offsetParent == elem.parentNode ? elem.offsetTop : pageY(elem) – pageY(elem.parentNode);
}
[/javascript]

上面的几个函数在table里面测试在各个浏览器都基本相同（FF，Chrome，Safari，Opera，IE8），可是ie6和ie7会多出2个像素的长度。大家可以自己测试一下：测试页面。

offsetHeight和offsetWidth主要用于获取DOM元素潜在的高度和宽度，比如图片或者一些没有显示声明高度和宽度的DOM元素等等就非常适合。

同时附带一个非常有用的函数，就是用于获取DOM元素的最终样式的getStyle函数，它通过IE的currentStyle以及FF等浏览器的getComputedStyle方法来获取最终样式：

[javascript]
//注意：样式属性的书写格式必须是骆驼型，比如:font-size要写成fontSize
var getStyle = function(el, c){
if (el.currentStyle) { //IE
return el.currentStyle[c];
} else if (window.getComputedStyle) { //W3C
return window.getComputedStyle(el, null)[c];
} else {
return el.style[c];
}
}
[/javascript]