瀏覽器、文件、滾動的寬高
阿新 • • 發佈：2018-11-19
BOM:瀏覽器物件模型
主要是為了解決視窗和視窗之間的通訊（互動）
window:BOM中的核心物件，建立的物件，變數都會自動成為window子物件，甚至於document也是window的子物件
1:獲取瀏覽器的寬和高（可視區域）（不包括工具欄和滾動條）
ie9以下不相容
window.innerWidth
window.innerHeight;
標準模式下，任意瀏覽器都相容document.body.clientWidth,
document.body.clientHeight
適用於怪異模式下的瀏覽器 沒有<!doctype html>
document.documentElement.clientWidth
document.documentElement.clientHeight
<!doctype html>
瀏覽器兩種渲染模式 怪異模式/混雜模式
檢視滾動條 ie9以下不支援// 可視區視窗寬高 （封裝函式getViewportOffset） function getViewportOffset(){ if(window.innerWidth){ return { x:window.innerWidth, h:window.innerHeight } }else { if(document.compatMode=="BackCompat"){ //document.compatMode=="BackCompat" //向後相容 return { w:document.body.clientWidth, h:document.body.clientHeight } }else { return { w:document.documentElement.clientWidth, h:document.documentElement.clientHeight } } } }
window.pageYOffset
window.pageXOffset
*************以下瀏覽器不相容，用時取兩個屬性值相加 ，因為不可能存在兩個同時有值
document.body.scrollTop
document.body.scrollLeft
document.documentElement.scrollTop
document.documentElement.scrollLeft
//文件的高度 寬度// 檢視滾動條(封裝getScrollOffset()函式) function getScrollOffset() { if(window.pageXOffset){ return { x:window.pageXOffset, y:window.pageYOffset } }else{ return { //瀏覽器不相容，用時取兩個屬性值相加 ，因為不可能存在兩個同時有值 x:document.body.scrollLeft+document.documentElement.scrollLeft, y:document.body.scrollTop+document.documentElement.scrollTop } } }
document.body.scrollWidth
document.body.scrollHeight
document.documentElement.scrollWidth
document.documentElement.scrollHeight
//文件的高度 寬度 (封裝getScrollHeight()函式)
function getScrollHeight(){
if(document.body.scrollWidth){
return {
w:document.body.scrollWidth,
h:document.body.scrollHeight
}
}else {
return {
w: document.documentElement.scrollWidth,
h: document.documentElement.scrollHeight
}
}
}//封裝insertAfter 功能類似insertBefore
Element.prototype.insertAfter = function (targetNode, afterNode) {
var beforeNode = afterNode.nextElementSibling;
if (beforeNode == null) {
this.appendChild(targetNode);
} else {
this.insertBefore(targetNode, beforeNode);
}
}