JavaScript BOM相关操作

window:表示浏览器窗口

所有JavaScript全局对象、函数和变量都是window的成员,甚至HTMLDOM也是。

查看元素尺寸

dom.offsetWidth  /  dom.offsetHeight

查看元素位置

dom.offsetLeft    /  dom.offsetTop

若是无定位元素,返回的是相对于文档的坐标

若是有定位元素,返回的是相对于最近有定位的父级元素的坐标

查看最近有定位的父级

dom.offsetParent

返回最近有定位的父级,若无,则返回body;

body的offsetParent返回null;

查看元素的几何尺寸

dom.getBoundingClientRect();

兼容性很好;

该方法返回一个对象,对象里面有left、right、top、bottom和width、height。

注意点:返回的结果并不是实时的。

窗口的大小和位置

1.完整窗口大小

    window.outerHeight  /  window.outWidth

2.文档显示区大小(视口大小)

    window.innerHeight  / window.innerWidth 

    注:IE8及以下不兼容

            包括了滚动条宽度

    document.documentElement.clientHeight  /  document.documentElement.clientWidth;标准模式下,任意浏览器都兼容。不包括滚动条宽度

    document.body.clientHeight   //  document.body.clientWidth;适用于怪异模式下的浏览器。

调整窗口大小:

1.打开窗口的时候

    window.open("url","name",config);

    config的格式 如:var config = "left=50,top=50,width=100,height=100";

    config中所有都是文档显示区的宽高和位置

2.在打开窗口之后

    window.resizeTo(width,heigh);    调整当天窗口的尺寸

    window.resizeBy(宽的增量,高的增量)

*两个方法在新版的浏览器中废除了。

除了窗口打开,对应有关闭窗口的方法

window.close()    关闭当天窗口

窗口的定位:

    left: screenX/screenLeft;

    top: screenY/screenTop;

移动窗口的位置:

    window.moveTo(x,y)    移动当前窗口

    window.moveBy(x的增量,y的增量)    

可用的屏幕宽度和高度

1.完整的分辨率:screen.width / screen.height

2.去掉任务栏的可用宽和高(减去界面特性,如任务栏):screen.availWith / screen.availHeight

让滚动条滚动

window上有三个方法

scroll(x,y)

scrollTo(x,y)

scrollBy(x,y)

三个方法类似,传入x,y坐标,实现让滚动条滚动。

前面个两个方法基本一样,而scrollBy()会在之前的数据基础上做累加。可以利用scrollBy实现快速阅读的功能。

查看滚动条的滚动距离

window.pageXOffset    /    window.pageYOffset    注:IE8及以下不兼容

document.body.scrollLeft    /    document.body.scrollTop

document.documentElement.scrollLeft    /    document.documentElement.scrollTop

上面两组方法因为兼容性比较紊乱,采取的方法是两种方法相加,因为不可能两个同时有值。


window.location

位置对象

用于获取页面的url地址

location.href    返回当前页面的整个URL

location.protocol    返回web协议(http://或者https://)

location.hostname    返回web主机的域名

location.port    返回端口号

location.pathname    返回路径和文件名。

location.assign()方法,加载新的文档


window.history对象

包含浏览器历史

history.back();

history.forword();

分别对应加载历史列表中的后一个和前一个URL。


消息框

JS中创建了3中消息框:

1.警告框

alert(“文本”);

2.确认框

confirm("文本")

使用户可以验证或者接受某些消息。确定返回true,否则false

3.提示框

prompt("文本","默认值")

如果用户点击确定,那么返回值为输入的值。取消则返回null

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,862评论 1 11
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,739评论 0 8
  •   ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么...
    霜天晓阅读 4,342评论 0 0
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,632评论 0 21
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 5,192评论 0 5