document.documentElement和document.body

昨天在试.xhtml时,看网上说要得到<html>节点,在xhtml里要用document.documentElement,而在html 4里要用document.body,以前虽然知道它俩之间的区别,但还真没仔细注意过。结果我一试,不管是用xhtml还是html,不管是加DOCTYPE还是不加,document.documentElement总是<html>节点,document.body总是<body>节点。

这是咋回事呢?后来找了半天,在一个博客里看到,好像只有在IE 4以前的浏览器才认为document.body是<html>节点,具体怎样说的我也忘了,现在再找那个博客也找不到了。我也没有IE 6以前版本的浏览器,没法试,算了,就这样吧,谁还会用IE 6以前的浏览器呢?

所有的现代浏览器都认为document.documentElement可以得到<html>,document.body可以得到<body>。

不过我可没说在IE下,带DOCTYPE的文件和不带的,对documet.documentElement的解释是完全一样的。例如,我们要得到浏览器的显示区域大小,在带DOCTYPE的文件里,我们要用document.documentElement.clientWidth/document.documentElement.clientHeight来得到;而在不带DOCTYPE的文件里,这时documentElement.clientWidth/clientHeight都等于0,我们要用document.body.clientWidth/document.body.clientHeight来得到。

明白了吗?不明白的话,那咱就来点更糊涂的。

接着上面那个例子,我们现在通常使用的得到浏览器显示区域大小的函数通常可以简单的这样写:

<script type="text/javascript">
function documentHeight() {
  var de = document.documentElement;
  return window.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight;
}

function documentWidth() {
  var de = document.documentElement;
  return window.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth;
}
</script>

这里的window.innerWidth,document.documentElement.clientWidth,document.body.clientWidth都是啥意思呢?都是为了得到浏览器显示区域的宽,第一个是适用于非IE系的,第二个是适用于带有DOCTYPE的IE 浏览器的,第三个是适用于不带有DOCTYPE的IE 浏览器的。

怎么样?乱不?

感觉还行的话,还有更刺激的,加不加DOCTYPE,不同的浏览器,有没有设置margin,这么多种情况,排列组合一下,测试一下以上那三个值,绝对够你喝一壶的。

如果感觉乱,那就到此为止吧,我们按w3c那帮闲人的标准来,加上DOCTYPE。

发表评论


注意 - 你可以用以下 HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>