- 浏览: 78135 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
128340haha:
这里只是一个前台的 图片裁剪与预览~!要截图的成品 用得到的参 ...
一枚基于jQuery的头像截取插件imgareaselect -
Shmily奕蝶:
指教一下,我按你说的弄了,可怎么还是截不了图啊,这是哪里的原因 ...
一枚基于jQuery的头像截取插件imgareaselect -
snake13456:
小图的定位不够准确,要自行修改一下
一枚基于jQuery的头像截取插件imgareaselect -
fuhao200866:
没事自己坐沙发,哈哈
q:before, q:after { content:''; }问题【记录用】
网页可见区域宽: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文档所在窗口的当前宽度。
源程序解读
(1)程序首先建立一个表单,包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数值会随窗口大小的改变而变化。
(2)在随后的JavaScript代码中,首先定义了两个变量winWidth和winHeight,用于保存窗口的高度值和宽度值。
(3)然后,在函数findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和宽度,并将二者保存在前述两个变量中。
(4)再通过深入Document内部对body进行检测,获取窗口大小,并存储在前述两个变量中。
(5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。
(6)在JavaScript代码的最后,通过调用findDimensions ( )函数,完成整个操作。
发表评论
-
减少浏览器重解析 JavaScript DOM操作优化方案
2011-11-24 10:26 746在我们开发互联网富应用(RIA)时,我们经常写一些JavaSc ... -
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
2011-11-23 16:23 1059采用JavaScript来控制iframe元素的高度是ifra ... -
微博加关注按钮
2011-11-18 16:00 966新浪微博:uid替换成自己的。 <iframe wid ... -
使用两种简单的方式解析 JSON 格式字符串
2011-08-12 15:33 1050//使用两种简单的方式解析 JSON 格式字符串 ... -
ajax请求
2011-07-29 10:53 790window.ajax = function(data){ ... -
Js实现检测、添加、移除样式(className)
2011-07-26 16:27 2419// 说明:添加、移除、检测 className ... -
插入话题后部分文字选中
2011-07-07 20:51 827var btn = document.getElement ... -
阻止事件冒泡
2011-07-07 14:26 759(ev || event).cancelBubble = tr ... -
js常见错误积累
2011-06-29 23:15 719unterminated string literal ... -
一个自定义背景色渐变对象,弥补jQuery的animate函数不足
2011-06-01 15:41 1466一个自定义对象fadeColor,来看下底层代码: wi ... -
Js操作Select大全
2011-05-27 18:28 821判断select选项中 是否存在Value="par ... -
JavaScript blog式日历控件新算法
2011-05-27 17:33 766<!DOCTYPE html PUBLIC &quo ... -
一个随机颜色的函数
2011-05-17 17:07 949function randomColor() { //16进制 ... -
常用JS判断正则
2011-05-06 18:45 948//是否含有汉字 function hasChinese(s ... -
40种网页常用小技巧(javascript)
2011-05-04 10:07 5811. oncontextmenu="window.e ... -
火狐与非火狐获取键值问题keyCode
2011-04-26 20:09 1026一次项目中,用到Enter 后ajax提交功能。keyCode ... -
获取浏览器窗口、页面等元素的大小
2011-04-20 12:01 793网页可见区域宽:document.body.clientWid ... -
自定义一个方法原型,取得json对象某个值
2011-04-19 13:10 945Object.prototype.k = function(n ... -
JS获取父页面元素
2011-04-11 01:22 1077//iframe下获取父元素 var oParent = p ... -
一个关于获取修改后文本域值的问题
2011-04-10 23:56 842一个Textarea文本域问题。 <textarea ...
相关推荐
在网页开发过程中,获取浏览器显示区域的大小是非常重要的一个环节,这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器显示区域的相关尺寸信息。 #### 一、关键概念...
为了实现这一点,我们定义了一个placeholderPic函数,该函数获取当前浏览器窗口的宽度,并将根元素的font-size样式属性设置为窗口宽度除以一个常数(此处为20),再将结果转换为像素值。这样,页面上的文字大小就会...
- 使用 `window.innerWidth` 和 `window.innerHeight` 来获取浏览器窗口的可视区域尺寸,这两个属性在现代浏览器中都得到了很好的支持。 - 在处理旧版浏览器或兼容性问题时,可以使用 `document.documentElement....
总结来说,jQuery 提供的这些方法可以帮助开发者精确地获取浏览器窗口和文档的尺寸信息,以便进行灵活的页面布局和响应式设计。在选择使用哪种方法时,需要根据实际需求来判断,比如是需要获取可视区域尺寸,还是...
在web开发中,调整浏览器窗口大小是常见的用户操作之一,JavaScript提供了一种机制,允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...
### 浏览器窗口属性大全:深入理解与应用 #### 引言 在Web开发领域,`window`对象是核心且不可或缺的一部分,它不仅代表了浏览器窗口本身,还提供了丰富的属性和方法,允许开发者对浏览器窗口进行精细控制,实现...
- **window.status**: 设置或获取浏览器窗口状态栏中的文本。 #### 14.7 处理未捕获的JavaScript错误 - **window.onerror**: 一个事件处理器,当窗口中的JavaScript发生错误时被调用。 - **语法**: `window.on...
`window.innerHeight`是Firefox和Chrome支持的属性,用于获取浏览器窗口可见内容的高度,同样,`window.innerWidth`则用于获取宽度。在Internet Explorer中,可以使用`document.documentElement.clientHeight`和`...
在前端开发中,获取浏览器窗口以及页面元素的宽高是一个经常执行的操作。原生JavaScript为我们提供了多种方法来实现这一需求。本文将详细介绍这些常用方法,并解释它们的应用场景。 1. 获取窗口可视区域的宽度和...
对于W3C的标准,`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 应该返回浏览器窗口的可视区域大小,但不同浏览器的实现有所差异。在没有定义标准的情况下,IE返回0,而Fire...
首先,我们可以使用`window.innerWidth`和`window.innerHeight`来获取浏览器窗口的总宽度和高度,包括工具栏和其他用户界面元素。但请注意,这两个属性并不包括滚动条的宽度和高度。 在Internet Explorer中,获取...
此外,除了获取浏览器窗口大小,我们还可以获取网页中特定元素的尺寸,如`offsetWidth`和`offsetHeight`属性,它们分别代表元素的外部宽度和高度,即元素的完整尺寸,包括边框和滚动条(如果有的话)。`scrollWidth`...
在网页设计中,为了提供更好的用户体验,经常需要根据用户的浏览器窗口大小来动态调整页面元素,尤其是图片的尺寸。本文将详细介绍如何使用jQuery实现这一功能,让图片能够自适应浏览器窗口的大小进行缩放。 首先,...
获取浏览器窗口的完整宽度和高度可以使用`window.outerWidth`和`window.outerHeight`。这两个属性包含了整个浏览器窗口的像素尺寸,包括菜单、工具栏等。 3. **动态监听窗口尺寸变化**: 有时候我们可能需要在窗口...
在网页开发中,经常需要获取浏览器的可见窗口大小,以便调整布局或执行某些基于视口尺寸的操作。本文将深入探讨如何使用 JavaScript 在不同浏览器中获取页面高度。 首先,我们有两个基本属性可以用来获取页面的宽度...
其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这对于响应式设计或某些特定功能(如弹窗位置计算)非常有用。 #### 一、主要窗口属性 在提供的代码示例中,通过`getInfo`函数展示了如何获取一...
通过JavaScript,我们可以轻松地获取浏览器窗口的尺寸和页面元素的尺寸,进而实现动态布局和适配不同的设备屏幕。 ### 获取浏览器窗口尺寸的方法: 1. **document.body.clientWidth** - 描述:返回当前页面的可视...
在JavaScript中,获取页面和元素的高度与宽度是常见的需求,这对于布局调整、动画效果或者响应式设计至关重要。下面我们将详细探讨如何使用JavaScript获取这些信息。 1. **页面可见区域大小** - `document.body....
通过 `document.body.clientWidth` 和 `document.body.clientHeight`,我们可以获取到网页可见区域的宽度和高度,而通过 `window.innerWidth` 和 `window.innerHeight`,我们可以获取浏览器窗口的宽度和高度。...
在这个文件中,可能包含了一个动态调整其高度以适应浏览器窗口大小的div元素。当用户改变浏览器窗口大小时,`onresize`事件会被触发,进而更新div元素的`height`,使其等于`clientHeight`,实现高度自适应的效果。 ...