javaScript BOM事件的应用

浅浅的花香味﹌ 2022-08-14 03:54 135阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8" >
    <title>JavaScript（BOM  bowser object model）</title>
    <script type="text/javascript">
    /*1、document.write('abc')放到一个事件中来用，先会把页面中所有的清空，然后再写。
      2、window.open('url'),用来打开另一个页面，可以设置窗口弹出方式'_blank'重新打一个,'_self'覆盖原来的窗口。这个函数返回新弹出的窗口。
      3、window.close();不能close由用户打开的页面。
      4、window常用的两个属性：window.navigator.userAgent当前浏览器版本信息;window.location当前页面的网址，还可以用来赋值，跳到另一个网址;
      5、窗口尺寸、工作区尺寸：可视区大小：document.documentElement.clientWidth;窗口滚动距离：document.documentElement.scrollTop;
      6、window.onscroll当页面滚动时发生，window.onresize,当页面尺寸改变时发生。
      7、系统对话框：alert('内容');confirm('内容')返回boolean值，prompt('提示语言'，'默认值')，输入框返回字符串或null;
    */
    window.οnlοad=function(){
     var oTxt=document.getElementById('txt1');
     var oBtn1=document.getElementById('btn1');
     var oBtn2=document.getElementById('btn2');
     var oBtn3=document.getElementById('btn3');
      //alert(window.navigator.userAgent);
      //alert(window.location);
      oBtn1.οnclick=function(){
       var oNewWin=window.open('about:blank');
       oNewWin.document.write(oTxt.value);
      }
      oBtn2.οnclick=function(){
        alert('宽:'+document.documentElement.clientWidth+'  高：'+document.documentElement.clientHeight);
      }
      oBtn3.οnclick=function(){
        //兼容IE、火狐
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //alert(scrollTop);
      }
    };
    //滚动定位
    window.οnscrοll=window.οnresize=function(){
          var oDiv1=document.getElementById('div1');
          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
          //alert(document.documentElement.clientWidth+':'+oDiv1.offsetHeight+':'+scrollTop);
          oDiv1.style.top=document.documentElement.clientHeight-oDiv1.offsetHeight+scrollTop+'px';
    };
    </script>
    <style type="text/css">
    #div1{width: 200px;height: 150px;background: red;position: absolute;right: 0;bottom: 0;}
    </style>
    </head>
    <body style="height:2000px;">
    <textarea id="txt1"></textarea>
    <input type="button" id="btn1" value="运行"><br>
    <input type="button" id='btn2' value="可视区大小"/><br>
    <input type='button' id="btn3" value='窗口滚动距离'/>
    <div id="div1">固定定位</div>
    </body>
    </html>