BOM基础

来源：互联网发布：mac windows 共享文件编辑：程序博客网时间：2024/06/01 16:45

1. window.open() 方法及相关参数
eg:

<span style="font-size:12px;"><script>       window.onload=function()        {            var oBtn=document.getElementById('btn1');            oBtn.onclick=function()              {                  window.open('http://www.baidu.com/','_blank');   //_blank从新窗口打开 _self从自身窗口打开              }        }</script></head><body>               <input id="btn1" type="button" value="开窗口"/>    </body>        </span>

2. 运行代码框实例
eg:

<span style="font-size:12px;"><script>       window.onload=function()       {            var oTxt=document.getElementById('txt1')            var oBtn=document.getElementById('btn1')            oBtn.onclick=function()            {                var oNewWin=window.open('about:blank');//新打开一个窗口                oNewWin.document.write(oTxt.value);            }       }</script> <body>      <textarea id="txt1" rows="10" cols="40"></textarea></br>      <input id="btn1" type="button" value="运行"/></body>*****document.write(内容)：清空当前页面并输出东西3. close()关闭当前窗口及新开窗口   close()在IE下可以直接关闭窗口，在FF下它只能关闭通过使用脚本打开的窗口，而用户自己打开的不能通过此方法关闭。4. window.navigator.userAgent 告诉当前浏览器的版本是什么5. window.location 读写页面的地址，不仅可读而且可写   eg: alert(window.lacation);       window.location='http://www.baidu.com/';6. 系统对话框及返回值   confirm()用来提问，有两种返回值：(1)true                                     (2)false       eg:/* var b=confirm('今天下雨了吗？')       alert(b);*/  //点的是确定返回true,点的是取消返回false       var str=prompt('请输入你的姓名','name');       alert(str);  //返回值是用户输入的文字或者null7. 侧边栏广告实例 (1) <style>        #div1 {width:100px; height:100px; background:red; position:fixed; right:0; top:50%; margin-top:-50px;} </style> <body style="height:2000px;">      <div id="div1"></div> </body></span>

重点总结：top:50%是指div的顶端就是屏幕垂直中间的一条线，要想让div在正中间则必须要把它向上移动50px,因此须要加上margin-top:-50px

(2)

<span style="font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style> #div1 {width:100px; height:100px; background:red; position:absolute; right:0; top:0;} </style> <title>测试</title> <script> window.onresize=window.onload=window.onscroll=function(){     var oDiv=document.getElementById('div1');     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;     var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;     oDiv.style.top=scrollTop+t+'px'; } </script> </head> <body style="height:2000px"> <div id="div1"> </div> </body> </html></span>

重点总结：window.onresize表示当页面重定大小的时候，即放大或缩小页面窗口

               window.onscroll表示当页面滚动的时候
               document.documentElement.scrollTop||document.body.scrollTop表示混动距离，
               一开始为零，页面朝下翻的时候，滚动条会滚动，这就是滚动条滚动的距离
               document.documentElement.clientHeight：可视区的高
               offsetHeight：网页内容的高度

    *****经测试如果前面不加：
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   就无法正常运行，求解！

0 0