首页 > web前端 > js教程 > Js操作BOM对象模型的详细介绍

Js操作BOM对象模型的详细介绍

php中世界最好的语言
发布: 2017-12-02 10:52:44
原创
1762 人浏览过

我们知道,BOM是可以对浏览器窗口进行访问和操作的,我们使用BOM一般都是作为移动窗口,改变状态栏的文本或者是执行其他与页面内容不直接相关的动作。

window对象:

1.窗口操作

其中moveTo,moveBy是窗口的移动,resizeTo,resizeBo是设置窗口的大小,scrollTo,scrollBy是设置滚动条每次滚动的位置.

打开和关闭新窗口:

openBtn.onclick = function() {
    newWindow = window.open("./test.html", "_blank", "width=300px, height=300px, left=500px, top=300px, toolbar=no")
};
closeBtn.onclick = function() {
    newWindow.window.close();
};
登录后复制

时间间隔和暂停:

时间间隔:

setInterval

暂停:

window.clearInterval

示例:

start.onclick = function() {
    // 3. 设置定时器
    times = setInterval(function() {
       window.scrollBy(0, 5);
    }, 40);
};
stop.onclick = function() {
    //4. 清除定时器
    window.clearInterval(times);
};
登录后复制

setTimeOut:只在时间间隔后执行一次操作

下面附上一个倒计时的例子:

历史记录:

history.go()

括号中的参数可以是1,-1

history.go(1)表示前进一页.相当于history.forward()
history.go(-1)表示后退一页,相当于history.back()
location:
登录后复制

location对象表示载入窗口的URL,此外,他还可以解析URL

1.hash:返回URL中#之后的部分

2.host:返回服务器的名字

3.href:当前载入页面完整的URL

4.search:执行GET请求的URL中的问号后面的部分

location对象有一个reload方法:可重新载入当前页面(刷新).

reload为false,从缓存中载入,reload为true,从服务器端载入,省略参数,默认为false

screen对象:

window.screen.availWidth+" "+window.screen.availheight    (窗口可以事情的屏幕的宽度和高度)

window.screen.Width+" "+window.screen.height  (屏幕的宽度和高度)

确定新窗口的大小时,availHeight和availWidth属性非常有用


相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

CSS3中transform属性怎么使用

如何用CSS3属性选择器替代JS的作用

怎样使用css3制作进度条

以上是Js操作BOM对象模型的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板