documentElement知識匯總
來源：程序員人生 發布時間：2014-03-03 10:55:41 閱讀次數：3173次
問題來源:
取得當前瀏覽器窗口的高度和寬度
解決文案:
<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呢.但這無濟于事!
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
