`
TonySun3544
  • 浏览: 161442 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript获取屏幕对象

 
阅读更多

 

屏幕对象介绍
屏幕对象(screen)提供了获取显示器信息的功能,显示器信息的主要用途是确定网页在客户机是所能达到的最大显示空间。很多情况下,用户的显示器大小尺寸不尽相同,以同一尽寸设计的网页往往得不到期望的效果。为此需得知用户显示器的信息,在运行时
确定网页的布局 

检测显示器参数
检测显示器参数有助于确定网页在客户机上所能显示的大小,主要使用screen对象提供的接口。显示的参数一般都包括显示面积的宽、高度和色深等,其中宽、高度是比较有意义的,直接与网布局相关,色深只是影响图形色彩的逼真程度 。
<Script language="javascript">			
	with (document) 			//用with语句引用document的属性
	{
		write ("您的屏幕显示设定值如下:<p>");	//输出提示语句
		write ("屏幕的实际高度为", screen.availHeight, "<br>");//输出屏幕的实际高
		write ("屏幕的实际宽度为", screen.availWidth, "<br>");//输出屏幕的实际宽
		write ("屏幕的色盘深度为", screen.colorDepth, "<br>");//输出屏幕的盘深度
		write ("屏幕区域的高度为", screen.height, "<br>");	//输出屏幕的区域高度
		write ("屏幕区域的宽度为", screen.width);	//输出屏幕的区域宽度
		write("", screen.height,"<br>");
		write(sereen.availHeight);
	}
</Script>			
 
客户端显示器屏幕分辨率 
显示器分辨率是指显示器所能显示的宽度和高度,通常以像素(pixel)为单位,例如笔者的显示器的分辨率为1280*800。在实际应用中,为了使制作的网页能适应不同的浏览器环境,最好使用JavaScript程序对用户的显示器进行检测,动态调整网页的布局 。

客户端显示器屏幕的有效宽度和高度 
有效宽度和高度,是指打开客户端浏览器,所能达到的最大宽度和高度。在不同的操作系统中,操作系统本身也要占用一定的显示区域,所以在浏览器窗口以最大化打开时,不一定占满整个显示器屏幕。因此,有效宽度和高度就是指浏览器窗口所能占据的最大宽度
和高度 。
 
<Script language="javascript">			
	with(document)					// 设置上下文
	{
		writeln(" 网页可见区域宽:"+ document.body.clientWidth+"<br>");		// 网页可见区域宽
		writeln( " 网页可见区域高:"+ document.body.clientHeight+"<br>");		// 网页可见区域高
		writeln(" 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br>");
		writeln( " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"+"<br>");
		writeln(" 网页正文全文宽:"+ document.body.scrollWidth+"<br>");		// 网页正文全文宽
		writeln(" 网页正文全文高:"+ document.body.scrollHeight+"<br>");		// 网页正文全文高
		writeln( " 网页被卷去的高(ff):"+ document.body.scrollTop+"<br>");		// 网页被卷去顶部分(ff)
		writeln(" 网页被卷去的高(ie):"+ document.documentElement.scrollTop+"<br>");
		writeln( " 网页被卷去的左:"+ document.body.scrollLeft+"<br>");		// 网页被卷去左部分
		writeln( " 网页正文部分上:"+ window.screenTop+"<br>");	// 网页正文部分上
		writeln( " 网页正文部分左:"+ window.screenLeft+"<br>");	// 网页正文部分左
		writeln( " 屏幕分辨率的高:"+ window.screen.height+"<br>");	// 分辨率高
		writeln(" 屏幕分辨率的宽:"+ window.screen.width+"<br>");	// 分辨率宽
		writeln(" 屏幕可用工作区高度:"+ window.screen.availHeight+"<br>");// 有效工作区高度
		writeln( " 屏幕可用工作区宽度:"+ window.screen.availWidth+"<br>");// 有效工作区宽度
	}
   </script>	
 


 

分享到:
评论
1 楼 dxwwym 2011-12-20  
这个不错.

相关推荐

    JavaScript获取屏幕高度和宽度等信息

    JavaScript作为一种广泛应用于网页编程的语言,提供了多种方法来获取屏幕的高度、宽度以及其他相关信息。以下将深入探讨如何使用JavaScript来获取屏幕尺寸和其他关键信息。 ### 一、获取屏幕尺寸 #### 1.1 使用`...

    js获取屏幕分辨率的方法

    本文将详细介绍如何使用JavaScript来获取屏幕分辨率,并探讨这些信息如何帮助我们实现div元素的自适应窗口大小。 #### 屏幕分辨率基础知识 屏幕分辨率指的是屏幕上显示的像素数量,通常以“宽度x高度”的格式表示...

    js获取屏幕的高度与宽度

    此外,需要注意的是,随着Web技术的发展,用户设备的多样性也日益增加,因此在使用JavaScript获取尺寸信息时,除了使用文档对象模型(DOM)属性和方法之外,还可能需要依赖于CSSOM(CSS对象模型)和HTML元素的实时...

    浅述Javascript的外部对象

    4. Screen对象提供了关于客户端屏幕的信息,它可以帮助我们获取屏幕分辨率、颜色深度等信息。Screen对象的一些常用属性包括width、height(屏幕总宽度和高度)、availWidth、availHeight(屏幕可用的宽度和高度)。 ...

    获取屏幕搞得,赋值给div

    在提供的压缩包文件中,`获取屏幕搞得,赋值给div.html`可能是一个包含了上述逻辑的HTML文件,`css`文件可能是包含相应CSS样式的文件,而`js`文件则可能包含处理屏幕高度和`div`赋值的JavaScript代码。通过分析这些...

    Javascript获取鼠标坐标的各种类型

    JavaScript获取鼠标坐标是Web开发中的常见需求,尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置,并解释它们的用途和差异。 首先,我们可以使用`event`对象来...

    JavaScript中的screen对象

    这个属性允许设置或获取屏幕的更新间隔,即屏幕刷新率。在JavaScript中,这个属性通常是只读的,无法直接设置。 总的来说,screen对象提供的这些属性在网页开发中有着广泛的应用,例如创建响应式布局、优化图像显示...

    JavaScript的浏览器对象详解

    本文将深入探讨JavaScript的浏览器对象,帮助开发者更好地理解和利用这些对象。 1. **window对象**:作为全局对象,window是所有JavaScript代码的上下文。它代表了浏览器的一个窗口或框架,包含了文档、导航、历史...

    javascript对象参考手册

    7. **BOM(浏览器对象模型)**:BOM允许JavaScript与浏览器进行交互,包括窗口、导航、历史记录、屏幕、定时器等方面,手册会阐述其用法。 8. **AJAX(异步JavaScript和XML)**:讲解如何使用XMLHttpRequest对象...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    40、原生JavaScript获取移动设备屏幕宽度 41、原生JavaScript完美判断是否为网址 42、原生JavaScript根据样式名称检索元素对象 43、原生JavaScript判断是否以某个字符串开头 44、原生JavaScript判断是否以某个字符串...

    javascript获取网页高度宽度.rar

    总结,JavaScript获取网页高度和宽度的方法多种多样,可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域,理解并熟练掌握这些技术可以帮助学生更好地构建动态、...

    JavaScript中的Screen屏幕对象

    总的来说,`Screen`对象是JavaScript提供的一种强大的工具,允许开发者获取到用户设备屏幕的详细信息,从而更好地适应和优化用户体验。通过熟练掌握这些属性,开发者可以创建出更智能、更适应不同设备环境的Web应用...

    JavaScript 对象技术

    通过BOM,开发者可以访问浏览器的各种属性和方法,比如打开新的窗口、获取屏幕尺寸等。 - **`window` 对象**:表示整个浏览器窗口,是BOM的核心部分。由于其特殊地位,很多与`window`相关的属性和方法可以直接调用...

    javascript对象、属性

    ### JavaScript对象与属性详解 #### Document对象及其方法 在JavaScript中,`Document`对象是用于访问和操作HTML文档的核心对象之一。它包含了多种方法和属性,可以帮助开发者动态地修改网页内容。 - **`document...

    JavaScript获取鼠标位置和鼠标与div的相对位置

    在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....

    JS获取浏览器对象

    在JavaScript中,获取浏览器对象是了解用户环境和实现特定功能的关键。这主要涉及到浏览器的`navigator`对象、`window`对象以及`screen`对象。这些对象提供了丰富的信息,包括但不限于浏览器类型、版本、语言设置、...

    10JavaScript浏览器对象模型BOM.docx

    5. **Screen对象**:Screen对象提供了有关用户屏幕的详细信息,如屏幕宽度、高度、颜色深度等。这对于响应式设计或根据用户设备调整内容特别有用。 了解和掌握BOM对象,对于JavaScript开发者来说至关重要,因为它们...

    javascript获取网页宽高方法汇总.docx

    在 Internet Explorer 中,也可以使用 `document.documentElement.scrollTop` 来获取滚动条位置,因为 IE 的标准模式下,`body` 对象并不总是包含滚动条信息。 5. `window.innerHeight` 和 `window.innerWidth` 这...

    百度地图API获取屏幕中心点坐标计算两点距离定位当前位置

    本篇文章将深入探讨如何利用百度地图API来获取屏幕中心点坐标,计算两点之间的距离,并定位用户的当前位置。首先,我们需要了解百度地图API的基本概念和使用方法。 百度地图API是百度提供的一项服务,它允许开发者...

Global site tag (gtag.js) - Google Analytics