zoukankan      html  css  js  c++  java

  • 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>
     
     
  • 相关阅读:
    java 23种设计模式及具体例子 收藏有时间慢慢看
    java中的内存一般分成几部分？
    深入浅出Java垃圾回收机制
    HashMap、HashTable、LinkedHashMap和TreeMap用法和区别
    java 序列化与反序列化
    JAVA中int、String的类型相互转换
    java IO和NIO 的区别
    数据库设计
    服务器硬件优化
    系统配置优化
  • 原文地址：https://www.cnblogs.com/CafeMing/p/6501635.html
Copyright © 2011-2022 走看看