BOM操作

1、BOM

             * BOM (Browser Object Model)
                浏览器对象模型     
                BOM是关于浏览器的方法，属性，事件     
2、window.open()
             *         参数
             *             1、要找开的新网页的地址
             *             2、找开方式_blank(新窗口默认) _self（自身） ... iframName（页面内嵌套）
             *             3、打开新窗口的一些信息
3、window.close()
             *     关闭页面
             *         不同的浏览器表现形式不一样
                    在ff/O下， 只允许关闭由window.open方法所打开的窗口
  1. window.onload=function(){
  2. var open=document.getElementById("open");
  3. var close=document.getElementById("close");
  5. open.onclick=function(){
  6. window.open('http://www.baidu.com','_blank');
  7. };
  9. close.onclick=function(){
  10. window.close();
  11. };
  12. };
  13. </script>
  14. </head>
  15. <body>
  16. <inputtype="button"value="打开新的页面"id="open"/>
  17. <inputtype="button"value="关闭新的页面"id="close"/>
  18. </body>
4、userAgent
             * window.navigator.userAgent        用户代理信息
             *     操作系统 、 浏览器内核 、浏览器版本等
                        console.log(window.navigator.userAgent);
5、window.location
             * window.location --- 地址栏信息
                字符串版的地址栏信息
                window.location.search
                地址栏查询信息 （问号到#号之间的所有内容，包含问号但不包含#）
                window.location.hash
                锚点信息（#号后面的所有内容,包含#）
  1. console.log(window.location);
  2. console.log(typeof window.location); //object
  4. console.log(window.location.search);
  6. console.log(window.location.hash);
  8. console.log(window.location.href);
6、可视区的尺寸
 
             * 元素的宽
             *     offsetWidth            带边框
             *     clientWidth            不带边框
             * 
             * 元素的高
             *     offsetHeight            带边框
             *     clientHeight            不带边框
             * 
             * 可视区的宽/高(DOM)
             *     document.documentElement.clientWidth
             *     document.documentElement.clientHeight
             * 
             * 可视区的宽/高(BOM)
             *     window.innerWidth
             *     window.innerHeight
             *     不兼容低版本的浏览器
7、获取滚动条距离以及设置滚动条距离
             * 获取滚动条的距离（DOM）
             *     
             *     chrom        document.body.scrollTop
             *     其它            document.documentElement.scrollTop
             * 
             * 获取滚动条的距离（BOM）
             *     window.pageXOffset/window.pageYOffset
             * 
             * 设置滚动条的距离
             *         window.scrollTo(x,y)
             *         全兼容，两个参数必需同时出现
  1. window.onload=function(){
  2. document.onclick=function(){
  3. console.log(document.body.scrollTop);
  4. console.log(window.pageYOffset);
  6. var t=window.pageYOffset;
  7. var time=setInterval(function(){
  8. t-=100;
  9. if(t<10){
  10. clearInterval(time);
  11. }
  12. window.scrollTo(0,t);
  13. },16);
  14. };
  15. };
8、内容高度
     1.offsetHeight         获取到的是元素的高度,包括边框
    2.clientHeight            获取到的是元素的高度，不包括边框
    3.scrollHeight            被内容撑开的高度，如果内容小于元素告诉，获取到元素高度（无边框）
    4.document.body.scrollHeight   获取body的高度
    5.document.body.offsetHeight  获取文档内容高度
  1. <style>
  2. #div1{
  3. width:100px;
  4. height:100px;
  5. height:100px;
  6. padding:10px;
  7. border:1px solid #f00;
  8. }
  9. #div2{
  10. height:200px;
  11. background: red;
  12. }
  13. body{
  14. border:1px solid #000;
  15. }
  16. </style>
  17. <body>
  18. <divid="div1">
  19. <divid="div2"></div>
  20. </div>
  21. </body>
  23. window.onload=function(){
  24. var div1=document.getElementById("div1");
  26. document.onclick=function(){
  27. console.log('offsetHeight',div1.offsetHeight); //122
  28. console.log('clientHeight',div1.clientHeight); //120
  29. console.log('scrollHeight',div1.scrollHeight); //120
  31. console.log(document.body.scrollHeight); //955
  32. console.log(document.body.offsetHeight); //124
  34. };
  35. };
 
9、onscroll 与 onresize
             * window.onscroll()
             *     当滚动条滚动的时候触发这个方法
             * 
             * window.onresize()
             *     当窗口改变大小的时候触发这个方法
  2. var i=0;
  4. window.onscroll=function(){
  5. i++;
  6. console.log(i);
  7. }
  9. window.onresize=function(){
  10. i--;
  11. console.log(i);
  12. };
10、回到顶部
  1. <style>
  2. #div1{
  3. width:100px;
  4. height:100px;
  5. background: red;
  6. font:20px/100px"微软雅黑";
  7. color:#fff;
  8. text-align: center;
  9. position:fixed;
  10. right:0;
  11. bottom:0;
  12. display: none;
  13. }
  14. </style>
  15. <script>
  16. window.onload=function(){
  17. var div=document.getElementById("div1");
  18. var time;
  19. window.onscroll=function(){
  20. var t=window.pageYOffset;
  22. if(t>200){
  23. div1.style.display='block';
  24. }else{
  25. div1.style.display='none';
  26. }
  27. div.onclick=function(){
  28. time=setInterval(function(){
  29. t-=50;
  30. window.scrollTo(0,t);
  31. if(t<=0){
  32. clearInterval(time);
  33. }
  34. },15)
  35. };
  36. };
  37. };
  38. </script>
  39. </head>
  40. <bodystyle="height:3000px;">
  41. <divid="div1">加到顶部</div>
  42. </body>
 
 





posted @ 2017-03-04 15:58  CafeMing  阅读(325)  评论(0)  编辑  收藏  举报