JS 取得瀏覽器與螢幕寬高等資訊的實作思維及程式碼

首頁

web前端

js教程

JS 取得瀏覽器與螢幕寬高等資訊的實作思維及程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:27 PM

js瀏覽器

網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被捲去的高：document.body .scrollTop
網頁被捲去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
螢幕解析度的高：window. screen.height
螢幕解析度的寬度：window.screen.width
螢幕可用工作區高度：window.screen.availHeight
螢幕可用工作區寬度：window.screen.availWidth
HTML定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 取得物件的滾動高度。
scrollLeft:設定或取得位於物件左邊界與視窗中目前可見內容的最左端之間的距離
scrollTop:設定或取得位於物件最頂端與視窗中可見內容的最頂端之間的距離
scrollWidth:取得物件的捲動寬度
offsetHeight:取得物件相對於版面或由父座標offsetParent 屬性指定的父座標的高度
offsetLeft:取得物件相對於版面或由offsetParent 屬性指定的父座標的計算左側位置
offsetTop:取得物件相對於版面或由offsetTop 屬性指定的父座標的計算頂端位置
event.clientX 相對文件的水平座標
event.clientY 相對文件的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX document.documentElement.scrollTop 相對文件的水平座標垂直方向滾動的量

IE，FireFox 差異如下：

IE6.0、FF1.06 ：

clientWidth = width padding
cli
offsetWidth = width padding border

offsetHeight = height padding border

IE5.0/5.5：
cli widm
>clientHeight = height - border

offsetWidth = width

offsetHeight = height

(我需要提一下：CSS中的margin屬性，與Heoffyidth、pidth、He無關)

－－－－－－－－－－－－－－－－－－－

技術要點
本節程式碼主要使用了Document物件關於視窗的一些屬性，這些屬性的主要功能和用法如下。
要得到視窗的尺寸，對於不同的瀏覽器，需要使用不同的屬性和方法：若要偵測視窗的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內部對body進行偵測；在DOM環境下，若要得到視窗的尺寸，需要注意根元素的尺寸，而不是元素。

Window物件的innerWidth屬性包含目前視窗的內部寬度。 Window物件的innerHeight屬性包含目前視窗的內部高度。

Document物件的body屬性對應HTML文件的標籤。 Document物件的documentElement屬性則表示HTML文件的根節點。

document.body.clientHeight表示HTML文件所在視窗的目前高度。 document.body. clientWidth表示HTML文件所在視窗的目前寬度。

實作程式碼

複製程式碼程式碼如下:

 
BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd"> 
 
請調整瀏覽器視窗 
  
璜

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。