BOM基础

最新推荐文章于 2022-12-30 19:07:09 发布

原创最新推荐文章于 2022-12-30 19:07:09 发布 · 306 阅读

CC 4.0 BY-SA版权

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);  //返回值是用户输入的文字或者null
7. 侧边栏广告实例
 (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">
   就无法正常运行，求解！