JS BOM基础（screen对象）

最新推荐文章于 2024-04-30 16:57:21 发布

是六月

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量182

点赞数

分类专栏：前端JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45929716/article/details/105072407

版权

前端JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

欢迎访问的我的个人博客http://liubofeng.com/

JS BOM基础（screen对象）

一、screen对象包含有关客户端显示的屏幕信息，目前没有应用与Screen对象的公开标准，不过所有浏览器都支持该对象

二、screen对象的主要属性

属性	描述
availHeight	返回显示屏幕的高度（除window任务栏之外）
availWidth	返回显示屏幕的宽度（除window任务栏之外）
width	返回显示器屏幕的宽度
height	返回显示器屏幕的高度

示例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Screen对象</title>
  <style type="text/css">
   
  </style>
  <script>
   window.onload=function()
   {
    console.log("屏幕宽度是"+screen.width)
    console.log("屏幕高度是"+screen.height)
    console.log("屏幕可用宽度是"+screen.availWidth)
    console.log("屏幕可用高度是"+screen.availHeight)
   }
  </script>
 </head>
 <body>
  
 </body>
</html>

在这里插入图片描述

分析：

availHeight显示浏览器的屏幕的可用高度，以像素作为单位，这个高度不包括屏幕底部的任务栏，所以高度会比screen.height少了任务栏的高度
本案例所用的屏幕分辨率是1920*1020
如果需要包括任务栏的就要用screen.height和screen.width

三、和innerHeight，innerWidth的区别
innerHeight/innerWidth 是window对象属性

属性	描述
innerHeight	返回窗口的文档显示区的高度（不包括菜单栏，工具栏）
innerWidth	返回窗口的文档显示区的宽度（不包括边框）

示例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>innerHeight/width</title>
  <style type="text/css">
   
  </style>
  <script>
   window.onload=function()
   {
    console.log("窗口的文档显示高度是"+innerHeight)
    console.log("窗口的文档显示宽度是"+innerWidth)
    
   }
  </script>
 </head>
 <body>
  
 </body>
</html>

运行效果：在这里插入图片描述

分析：

innerWidth和innerHeight属性返回的窗口的宽度和高度。当浏览器窗口变化时，窗口的文档显示区域也随之变化。
这个区域不包括控制台的宽度和高度。
高度不包括菜单栏、工具栏；宽度不包括边框

是六月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS BOM基础（screen对象）

JS BOM基础（screen对象）一、screen对象包含有关客户端显示的屏幕信息，目前没有应用与Screen对象的公开标准，不过所有浏览器都支持该对象二、screen对象的主要属性属性描述availHeight返回显示屏幕的高度（除window任务栏之外）availWidth返回显示屏幕的宽度（除window任务栏之外）width返回显示器屏幕的宽度...
复制链接

扫一扫