浏览器对象模型BOM

最新推荐文章于 2024-07-25 11:52:08 发布

Kedaya_7017

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量90

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/Kedaya_7017/article/details/120335511

版权

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

1.window

BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

1.窗口位置

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持)

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

IE8及更早IE版本不支持该属性,但可以使用
"document.body.scrollLeft" 和 "document.body.scrollTop" 属性。

2.窗口大小

innerWidth 页面视图区的宽度

innerHeight 页面视图区的高度

outerWidth 浏览器窗口的宽度

outerHeight 浏览器窗口的高度

所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

3. scrren对象

屏幕总宽度/高度:

screen.width

screen.height

可用宽度/高度:

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率:

screen.pixelDepth

2.系统对话框

alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。

alert()

该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息

confirm()

确认对话框，显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值，true表示单击了OK，false表示单击cancel 或者关闭按钮

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 确认框</h1>


<button onclick="myFunction()">试一试</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "您按了确定";
  } else {
    txt = "您按了取消";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

prompt()

会话框，提示用户输入一些文本。显示包含文本，ok按钮,cancel按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数，要显示给用户的文本提示和文本输入域的默认值。
如果用户单击OK按钮，该方法返回输入域的值，如果用户单击了 Cancel或者关闭对话框该方法返回null

3.location对象

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

Kedaya_7017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器对象模型BOM

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。...
复制链接

扫一扫