JavaScript中常常用到BOM (Browser Object Model) 圖,BOM圖與DOM圖主要區別在于BOM圖是關于瀏覽器窗口的信息,而DOM圖是關于文檔的信息。BOM圖通常包括瀏覽器窗口尺寸、滾動條位置、瀏覽器所在的屏幕位置等。下面通過舉例來介紹BOM圖的使用方法。
1. 獲取瀏覽器窗口的尺寸
/*獲取瀏覽器窗口的寬度*/ var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; /*獲取瀏覽器窗口的高度*/ var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
2. 獲取瀏覽器窗口的滾動條位置
/*獲取滾動條的橫坐標*/ var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; /*獲取滾動條的縱坐標*/ var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
3. 修改瀏覽器窗口的位置
/*將瀏覽器窗口移動到(0,0)*/ window.moveTo(0,0); /*將瀏覽器窗口移動到(200,200)*/ window.moveBy(200,200);
4. 彈出提示框或確認框
/*彈出提示框*/ alert("Hello World!"); /*彈出確認框*/ confirm("Are you sure?");
5. 打開新的瀏覽器窗口
/*打開百度網址*/ window.open("http://www.baidu.com"); /*打開百度網址,并設置窗口大小和位置*/ window.open("http://www.baidu.com","_blank","width=500,height=500,left=200,top=200");
6. 定時執行某些操作
/*每隔1秒鐘彈出一次提示框*/ setInterval(function(){ alert("Hello World!"); },1000);
7. 延時執行某些操作
/*延時3秒鐘后彈出提示框*/ setTimeout(function(){ alert("Hello World!"); },3000);以上就是幾個常用的BOM圖操作,通過上述方法,既可以獲取瀏覽器窗口的信息,也可以在瀏覽器窗口上進行操作。 BOM圖在JavaScript中有著廣泛的應用,希望對廣大碼友有所助益。
上一篇ajax提交form文件
下一篇css懸停顯示列表