documentElement知识汇总
来源：程序员人生 发布时间：2014-03-03 10:55:41 阅读次数：3001次
问题来源:
取得当前浏览器窗口的高度和宽度
解决文案:
<script type="text/javascript">
//from ppk (http://www.jr.pl/www.quirksmode.org/viewport/compatibility.html)
var x,y;
if (self.innerHeight) // all except Explorer
{
x = self.innerWidth;
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
</script>
解决过程:
关于document.documentElement相关解释:
w3c:This is a convenience attribute that allows direct access to the child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML".[译:他是一个可以非常便捷的指向文档的根结点元素,比如HTML文档中指的是HTML标签]
mozilla developer:Returns the Element that is the root element of the document (for example, the <html> element for HTML documents). [译:返回文档的根结点元素,如HTML文档的<html>]
MSDN:Gets a reference to the root node of the document.[译:获取对浏览器的DOCUMENT元素的引用.(form MSDN中国)]
The CSSOM View Module节选并自己的译文(翻译不当之处,欢迎指正)
I have doubts about the WindowView interface, which contains ancient properties such as innerWidth.
我怀疑WindowView的接口,如他包含一些非常老的方法,如innerWidth.
The problem is that innerWidth/Height and pageXOffset/pageYOffset are essentially doubles: they report the same information as document.documentElement.clientWidth/Height and document.documentElement.scrollTop/Left: the inner width of the viewport (browser window) and the scrolling offset of the document.
问题是innerWidth/Height和pageXOffset/pageYOffset有双重特性,document.documentElement.clientWidth/Height和document.documentElement.scrollTop/Left也给出了同样的信息:浏览器内部窗口和文档的滚动条偏移.
Since we already have that information available, why repeat it? The only reason would be that there might be situations where the documentElement does not span the entire viewport, but as far as I know these situations don't exist nowadays, and frankly I wonder if they'll ever exist.
既然我们得到了有效的信息,为何又要重复呢?这唯一的原因可能是解决documentElement不能跨越整个窗口,但据我所知这个问题今天已解决了,我还想知道是否他曾经就存在过这个问题.
I created a quick test that gives the root <html> element a wide margin and a border. Clicking outside the border still reports the <html> element as target, and document.documentElement.clientWidth and window.innerWidth report the same number of pixels in all browsers.
我做了一个示例,给标签<html>增加了margin和border.单击border外围区域,同样显示<html>标签存在,并且document.documentElement.clientWidth和 window.innerWidth在每个浏览器上都显示同样的像素大小.
So even though the root element may appear to cover only part of the viewport, JavaScript still acts as if it covers the entire viewport. That makes sense: there is no block-level element that contains the root element (or the root element wouldn't be the root element).
即使根元素可能覆盖了窗口的一部分,他覆盖整个窗口时,javascript依然显示他的存在.那么结论是-没有块级元素能包含根元素.
The other properties of the window view, outerWidth/Height and screenX/Y, are mostly useless. They've been around since Netscape 3, and in the ten years I've been writing scripts I've never needed to use either of them.
window的其它属性,outerWidth/Height和screenX/Y,基本上也是无效的.他在Netscape 3的时候用的非常广泛,最近几年我写脚本的时候再也没有用到他们了.
For al these reasons I'm wondering if the WindowView shouldn't be scrapped outright. It just serves no purpose.
因为一些其它原因我怀疑是不是应该废弃WindowView呢.但这无济于事!
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
