js浏览器对象模型-BOM

bom

  browse object model

  浏览器对象模型。

  也就是window对象下面的东西。

location 对象

  window.location.href 表示打开窗口的路径。

  window.location.reload 刷新当前页面。

navigator 对象

  window.navigator.appName 浏览器名称。

  window.navigator.userAgent 用户代理信息，通过该属性可以获取浏览器以操作系统信息。

confirm() 方法

  confirm("对话框提示文字")

  此方法有返回值，点击确定返回 true ，取消返回 false 。

var a=confirm('你在吗')

if(a){

console.log('在')

}else{

console.log('不在')

}

prompt() 方法

  prompt('对话框提示文字')

  此方法有返回值，点击确定返回对话框字符。取消返回 null 。

var a=window.prompt('输入姓名')

if(a!=null && a!=''){

console.log('注册成功')

}

onfocus() 使元素获得焦点

onblur() 当元素失去焦点

open() 方法

  window.open('url','打开方式','窗口大小')

  第三个窗口可以设置窗口大小的前提是窗口在新窗口中打开。

  如果打开方式不写，默认是打开新窗口。

<input type="button" id="btn" value="按钮">

<script>

//在ie下打开已经设置大小的窗口没有滚动条而且不能调节大小

btn.onclick=function(){

window.open('http://www.baidu.com/','_blank','width=500,height=500')

}

</script>

close() 方法

  当直接使用 window.close 时，在谷歌中将关闭自己窗口。

  在火狐中没有任何反应。

  在ie中询问是否关闭。

<input type="button" id="btn" value="打开新窗口">

<input type="button" id="btn1" value="关闭新窗口">

<script>

var opener=null; //在外面定义此变量，以让另一个函数能使用。

btn.onclick=function(){

opener=window.open('http://www.baidu.com')

}

btn1.onclick=function(){

//每打开一个新窗口，会开启一个新的 window 对象。

opener.close()

}

</script>

clientWidth/Height 不加border的大小

  他们获取的大小包括元素自身大小和padding大小。

  一般获取整个页面的大小，使用 documentElement ，而不是 body.clientWidth/Height 。

var w=document.documentElement.clientWidth;

var h=document.documentElement.clientHeight;

console.log(w,h)

offsetWidth/Height 加border的大小

  获取 自身+padding+border 的大小 。

<div id="div1" style="width:100px;height:100px;padding:2px;border:5px solid #ccc;margin:10px"></div>

<script>

var div1=document.getElementById('div1');

var w=div1.clientWidth; //104 自身+padding

var w1=div1.offsetWidth; //114 自身+padding+border

console.log(w,w1)

</script>

onresize 窗口被改变时

//当窗口大小改变时

window.onresize=function(){

console.log('窗口被改变')

}

scrollTop/Left 滚动距离

  document.body.scrollTop||document.documentElement.scrollTop;

  获取页面的上下滚动距离。当然没有滚动就没有滚动距离。

  document.body.scrollLeft||document.documentElement.scrollLeft;

  获取页面的左右滚动距离。

window.onclick=function(){

// body 用来兼容 chrome

var st=document.body.scrollTop||document.documentElement.scrollTop;

console.log(st) //滚动的距离

}