JavaScript Screen对象属性方法小结

最新推荐文章于 2024-04-29 00:07:39 发布

Claire_TJ

最新推荐文章于 2024-04-29 00:07:39 发布

阅读量751

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！

学习来源：http://www.w3school.com.cn/jsref/dom_obj_screen.asp

Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

Screen 对象属性

属性	描述
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
height	返回显示屏幕的高度。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval	设置或返回屏幕的刷新率。
width	返回显示器屏幕的宽度。

我的测试结果：每一个按钮点击后就可以出现相应的函数效果。

就像这样:

以下是源代码（有哪里需要我加注释的，欢迎在评论区与我交流）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Screen 对象</title>
  <style media="screen" type="text/css">
    body {
      margin: 0;
      padding: 0;
    }

    input {
      margin-left: 50px;
      margin-top: 10px;
      display: block;
      font-size: 20px;
    }

    p {
      margin-left: 50px;
      font-size: 20px;
    }
  </style>
  <script type="text/javascript">
    function AvailHeight() {
      document.getElementById('availheight').innerHTML = screen.availHeight;
    }

    function BufferDepth() {
      document.getElementById('bufferdepth').innerHTML = screen.bufferDepth;
    }

    function Height() {
      document.getElementById('height').innerHTML = screen.height;
    }
  </script>
</head>

<body>
  <input type="button" value="availHeight返回显示屏幕的高度 (除 Windows 任务栏之外)。" onclick="AvailHeight()">
  <p id="availheight"></p>
  <input type="button" value="bufferDepth设置或返回调色板的比特深度。" onclick="BufferDepth()">
  <p id="bufferdepth"></p>
  <input type="button" value="height返回显示屏幕的高度。" onclick="Height()">
  <p id="height"></p>
</body>

</html>

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

History 对象属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

History 对象方法

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

以下是源代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>History对象</title>
  <style media="screen" type="text/css">
    body {
      margin: 0;
      padding: 0;
    }

    input {
      margin-left: 50px;
      margin-top: 10px;
      display: block;
      font-size: 20px;
    }

    p {
      margin-left: 50px;
      font-size: 20px;
    }
  </style>
  <script type="text/javascript">
    function Length() {
      document.getElementById('length').innerHTML = history.length;
    }

    function Back() {
      window.history.back();
    }

    function Forward() {
      window.history.forward();
    }

    function Go() {
      window.history.go(-1);
    }
  </script>
</head>

<body>
  <input type="button" value="length返回浏览器历史列表中的 URL 数量。" onclick="Length()">
  <p id="length"></p>
  <input type="button" value="back()加载 history 列表中的前一个 URL" onclick="Back()">
  <input type="button" value="forward()加载 history 列表中的下一个 URL" onclick="Forward()">
  <input type="button" value="go()加载 history 列表中的某个具体页面。" onclick="Go()">

</body>

</html>

Claire_TJ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Screen对象属性方法小结

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！学习来源：http://www.w3school.com.cn/jsref/dom_obj_screen.aspScreen 对象Screen 对象包含有关客户端显示...
复制链接

扫一扫