rather_lonely
- 浏览: 97253 次
- 性别:
- 来自: 南京
-
文章分类
最新评论
-
330821256：
谢谢了 ！！！
myeclipse中debug class文件 -
godmy20：
不知道好不好用。。还是先谢谢
jrokit工具 -
hxskwk：
哥，我本来还明白点，让你这么一说倒给我整糊涂了！
你的意思是说 ...
javascript 匿名函数的理解，js括号中括function 如(function(){}) -
wuj787583992：
这个程序要放在servlet上跑还是直接作为一个java ap ...
java获取MAC地址
网页可见区域宽：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
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： 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
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了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文档所在窗口的当前宽度。
实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
网页可见区域高：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
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： 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
－－－－－－－－－－－－－－－－－－－
技术要点
本节代码主要使用了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文档所在窗口的当前宽度。
实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"><br>
浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//结果输出至两个文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解读
（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。
（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。
（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。
（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。
（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。
（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。
- weibian.zip (2.3 KB)
- 下载次数: 3
分享到：
发表评论
-
你真的了解如何将 Nginx 配置为Web服务器吗
2016-12-02 09:01 4052016-11-27 23:14 | Nginx ... -
webpack+react搭建
2016-09-19 16:11 564https://my.oschina.net/u/140318 ... -
下面链接收集移动端开发所需要的一些资源与小技巧
2016-08-30 15:06 421https://github.com/jtyjty99999/ ... -
iscroll左右滑动同时上下滑动无效
2016-08-30 09:59 372在iscroll.js文件，找到 on ... -
导出excel自定义RGB颜色
2015-01-15 11:10 3217DevNote Logo Go! 首页 Java Solr ... -
安装mysql5.5时，到了start service没反应解决方案
2014-12-30 16:12 945安装mysql5.5时，到了start service没反应解 ... -
主流浏览器以及分辨率
2014-11-11 17:03 18252014年5月份 PC平台 浏览器、分辨率、操作系统市场份额 ... -
css让背景图片铺满全屏的方法
2014-09-29 10:02 4039<div id="background&qu ... -
强制360使用chrome内核渲染网页
2014-09-28 10:37 1222增加头部信息：<meta name="ren ... -
angularjs chrome浏览器插件batarang
2014-05-26 08:56 2709插件下载地址：https://chrome.google.co ... -
图片放大插件
2014-05-13 11:47 472jqZoom是一款不错的图片放大插件 -
angular.js应用
2014-01-03 14:51 7682013年度最强AngularJS资源合集 ... -
可视化html编辑器
2013-11-27 22:09 519http://www.tinymce.com/ -
作为Web开发人员，我为什么喜欢Google Chrome浏览器
2013-11-06 17:51 689作为Web开发人员，我为 ... -
IEbug总结
2013-10-25 17:49 425作为一名前端，我们通常要做的就是让页面在各系统A-Grade ... -
js正则表达式
2013-10-16 09:34 432正则表达式大全 正则 ... -
小工具
2013-07-25 09:26 662取色工具 -
google文件验证框架,非常好用
2013-07-23 18:11 834google文件验证框架,非常好用 http://wen ... -
jquey插件大全
2013-06-18 15:55 843http://bxslider.com/ 图片滑动切换 ... -
JavaScript对象模型-执行模型
2011-09-23 19:28 729转载至：http://www.cnblo ...
相关推荐
然后，您需要将游戏中的语言更改为toki pona（ma ali）-您可能需要向下滚动至语言列表的底部，因为它们并不是全部按字母顺序排列。 最新版本：适用于Minecraft 1.16.5的v2.6，现已更名为leko toki。 带有社区意见，...
Toki Pona极简conlang的Python和Vim实用程序 （此README.md文档的格式正确： : ） 该存储库同时拥有： tokipona Python软件包（带有处理Toki Pona的工具）； 和 tokipona Vim插件（主要带有语法文件和一些高级着色...
有许多优秀的jQuery时间轴插件可供选择，例如TimelineJS、Tiki-Toki、TimelineMax等。这里以TimelineJS为例，它是一个强大的开源插件，支持多语言、多媒体集成和自定义样式。 安装TimelineJS需要在HTML文件中引入所...
Toki Pona字典 带有搜索功能的简单Toki Pona-英语字典。 这本词典力求涵盖Toki Pona演讲者所使用的所有单词，而不会忘记官方词典。 因此，它包含一些非官方的单词和含义，但它们始终标有星号。 这本词典有许多资料...
总的来说，Sam Toki的Rainmeter皮肤包是一个精心设计的桌面美化解决方案，结合了美观和实用性，让用户能够根据个人偏好打造独一无二的桌面环境。无论是对 Rainmeter 初学者还是经验丰富的用户，这款皮肤都是一个值得...
lipu lili pi toki pona tl; dr该语法说明和词典显示了我如何使用该语言以及我的原则是什么。 这本来不是本课的任何内容，但我可以将其中的潜力看作是有关该语言的“简要”摘要，或者像是备忘单。 我建议您先检查...
lipu lili pona lipu lili pona 是一个单双面页，包含toki pona 的字典和语法。 页面的翻译是通过 GitLocalize 完成的： ://gitlocalize.com/repo/5541/
该库要求在网页的head包含一个缩小JavaScript文件和其他样式。 < link rel =" stylesheet " href =" styles/sitelen-sitelen-renderer.css " > < script type =" text/javascript " src =" dist/sitelen-...
通过转到，你输入一个词或一个短语toki pona ，你会得到下面的句子，悬停时，可能有不同的含义（目前是英语）。 Toki pona 课程 (在制品) 地址： : 这是 Laurent Vogel 的的摘录。 鉴于此文本是的翻译，并且这些...
- **时间轴**：通过时间轴工具（如TimeToast、Tiki-Toki等）呈现船的发展历程，直观展示各个阶段的技术进步。 ### 信息技术教育 **知识点5：信息技术在教育中的应用** - **电子白板与交互式教学**：利用电子白板等...
"toki seme"意为"说什么"，这个项目名为“Toki Seme”显然是一个基于JavaScript的工具，帮助用户翻译和理解Toki Pona句子。JavaScript是一种广泛使用的编程语言，特别是在前端开发中，用于创建交互式的网页应用。 ...
Wiki-toki是供私人使用的，因此您需要登录才能查看或编辑其页面。 要登录，您只需键入一个密码短语（没有单独的用户，因为这意味着一个人）。 页面是用编写的 编辑时进行实时页面预览 预览链接图像 搜索标题和内容 ...
例如，可以利用jQuery Timelinr、TimelineJS、Tiki-Toki等开源库快速构建时间轴。 2. 数据可视化库：对于更复杂的数据驱动的时间轴，可以使用D3.js（Data-Driven Documents）这样的数据可视化库。D3.js提供了强大的...
27. 你走好 —— 依帖拉瞎依（出かける时には，Dekakeru toki ni wa）：送别时说的话。 28. 好久不见了—— 偶嘿撒洗不利（久しぶりですね！，Hisaishin desu ne!）：久违重逢的问候。 29. 你身体还好吗？—— 欧赶 ...
《tokitoki-js：探索 Toki Pona 语言的 JavaScript 解析库》 Toki Pona，一种极简主义的人工语言，以其独特的哲学和简单的词汇吸引了全球爱好者。而 tokitoki-js，正如其名，是一个专为解析 Toki Pona 语言设计的...
JavaScript库如TimelineJS或Tiki-Toki，允许开发者轻松地将图片和信息组织成一个有条理的时间线，增强叙事的连贯性和吸引力。 5. **图片网格布局（Masonry Grids）** Masonry布局模仿了砖墙的不规则堆砌，使得图片...
对Circle Pad Pro和其他3DS输入的测试。 ###要使用IR，您必须拥有以下游戏之一： 立方忍者（美国） 时间的陶笛3D Toki no Ocarina 3D（OoT 3D） 死点或活点尺寸 请确保您在与CPPTest.3dsx相同的目录中具有...
MacType是一款针对Windows系统优化字体渲染的工具，它能够显著提升文字在屏幕上的显示效果，尤其是在高分辨率显示器上。这款工具通过调整系统字体渲染参数，让文字看起来更加清晰、美观，接近Mac系统的字体表现。...
一些流行的时间轴插件有TimelineJS、Vis.js、Tiki-Toki等，它们都提供了详细的文档和示例代码，帮助开发者快速上手。 在使用时间轴插件时，开发者需要准备数据结构，这通常是一个包含时间戳、标题、内容等字段的...