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(){
}
</script>
|
close() 方法
当直接使用 window.close 时，在谷歌中将关闭自己窗口。
在火狐中没有任何反应。
在ie中询问是否关闭。
<input type="button" id="btn" value="打开新窗口">
<input type="button" id="btn1" value="关闭新窗口">
<script>
var opener=null; //在外面定义此变量，以让另一个函数能使用。
btn.onclick=function(){
}
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="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(){
var st=document.body.scrollTop||document.documentElement.scrollTop;
console.log(st)
}
|