`
pipi709
  • 浏览: 24413 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

js 网页各种定位

    博客分类:
  • css
阅读更多

网页可见区域宽: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+Js定位与相对定位

    在网页设计中,CSS(层叠样式表)和JavaScript(JS)是两个至关重要的技术,它们共同作用于页面元素的定位和交互。本主题主要探讨的是CSS中的定位机制,特别是相对定位,以及如何通过JavaScript来进一步调整元素的...

    CSS和Js演示网页绝对定位与相对定位,这些是我们从事前端编程的基础技能,应该学会的东西,这个小示例会告诉你绝对与相对的区别,以及如何去实现他们

    在前端开发领域,掌握CSS(层叠样式表)和JavaScript(JS)是构建美观、功能丰富的网页的关键。其中,理解并运用绝对定位和相对定位是基础技能之一,它们能够帮助开发者精确控制页面元素的位置,从而实现复杂且响应...

    《html+css+javascript 网页制作案例教程》源代码

    此外,JavaScript库和框架,如jQuery、React、Vue.js等,极大地简化了开发过程,提供了丰富的功能和性能优化手段。 这个压缩包中的"html_blackhorse-code"很可能包含了多个示例项目,每个项目对应书中的一个或多个...

    无缝滑动定位js

    总之,无缝滑动定位js是一种提高网页互动性和用户体验的技术,它结合了HTML、CSS和JavaScript,特别是jQuery库的功能,使用户在浏览网页时能享受到流畅的导航体验。通过学习和应用这些知识点,开发者可以为他们的...

    网页楼层定位jq,js,demo.zip

    "网页楼层定位jq,js,demo.zip" 是一个包含示例代码的压缩包,它涉及到的主要技术是JavaScript(js)、jQuery(jq)以及可能的Bootstrap框架和CSS。下面我们将详细探讨这些技术在实现楼层定位中的应用。 1. **...

    html css javascript网页开发-张孝祥

    《HTML CSS JavaScript网页开发-张孝祥》是一本深度探讨网页开发核心技术的电子书籍,由知名讲师张孝祥编著。这本书以清晰易懂的方式,系统地介绍了网页开发的三大基础语言:HTML、CSS和JavaScript,旨在帮助读者从...

    Javascript动态网页编程源代码

    通过研究这些章节的源代码,开发者可以深入理解JavaScript的工作原理,学习如何利用JavaScript来实现各种网页动态效果。每个章节都是一次实践的机会,通过阅读、运行和修改代码,可以提高编程技能,增强解决问题的...

    JS河南网页介绍模板家乡主题网页设计(小白必看)

    JavaScript(JS)和ECMAScript(ES)是前端开发中的动态语言,它们使网页具有交互性和功能。在“河南”网页中,JS可以实现以下功能: 1. 图片轮播:自动切换展示河南的不同景点。 2. 地图互动:用户可以通过地图...

    简单的javascript网页飘窗

    JavaScript网页飘窗是一种常见的网页设计元素,用于在用户浏览页面时弹出通知、广告或重要信息。飘窗通常设计为不遮挡主要内容,且能够轻松关闭,以提供良好的用户体验。在本文中,我们将深入探讨如何使用JavaScript...

    基于js, javaScript的地图定位小程序

    在IT领域,JavaScript(通常简称为js)是一种广泛使用的客户端脚本语言,它在网页和Web应用程序中扮演着至关重要的角色。在这个特定的项目中,"基于js, javaScript的地图定位小程序"是一个利用JavaScript技术实现的...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》源代码.zip

    在本教程中,JavaScript文件可能以.js结尾,用于处理用户输入、改变页面内容或与其他Web服务进行通信。理解JavaScript的基本语法、DOM操作和事件处理是网页开发的关键技能。 在实践中,HTML、CSS和JavaScript常常...

    javascript 光标定位例子

    在这个"javascript 光标定位例子"中,我们关注的是如何在网页文本输入框内实现光标定位的功能,比如在微博应用中实现“@”功能。当用户在输入框中输入“@”时,通常会弹出一个下拉菜单供用户选择用户名,而在此过程...

    整理1500个JS特效源码

    7. **动画效果**:包括平滑滚动、粒子效果、3D转换等,JavaScript结合CSS3能创造出各种炫酷的视觉效果,提升网页的艺术感。 8. **模态框**:弹窗、提示框等,通过JavaScript可以轻松控制其出现、消失及交互行为,...

    网页常用各种广告效果JS集合

    网页开发中的广告效果是提升用户体验和吸引用户注意力的重要手段,JavaScript(JS)作为一种强大的客户端脚本语言,在实现这些效果上发挥了关键作用。本资源“网页常用各种广告效果JS集合”汇集了多种常见的网页广告...

    javascript网页特效实例大全

    在这个“JavaScript网页特效实例大全”中,你将找到许多实用且美观的特效,这些特效能极大地提升你的网站用户体验。 首先,JavaScript特效在网页设计中的作用不可忽视。它们可以使页面变得生动有趣,比如图片轮播、...

    JS如何实现在页面上快速定位(锚点跳转问题)

    在网页设计中,尤其是在内容较多、页面较长的情况下,合理使用锚点可以提高用户体验,让用户快速定位到感兴趣的内容区域。 锚点跳转主要可以通过两种形式实现:一种是使用传统的a标签配合name属性,另一种是使用a...

    抓取网页图片,css和js

    对于JavaScript驱动的动态网页,可能需要使用如Selenium等工具来模拟浏览器行为,以便执行JS并获取最终渲染的页面内容。 二、图片抓取 图片抓取是爬虫的一个重要部分,主要是找到HTML中的`<img>`标签,提取其`src`...

    基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)

    通过上述知识点,本文详细介绍了如何通过JavaScript实现基于手机定位获取当前位置的细节,适用于开发移动网页或者应用。代码示例有助于理解整个流程的实现,并且可以直接应用于实际开发中,以增强用户体验。

    jquery左侧导航滑动网页定位效果.zip

    【jQuery左侧导航滑动网页定位效果】是一种常见的前端交互设计,它主要应用于具有大量内容的长页面,使得用户可以通过导航栏快速跳转到页面的特定部分。这种效果大大提升了用户体验,因为用户无需手动滚动浏览整个...

    JS基于高德地图定位城市闪烁特效.zip

    以上就是实现JS基于高德地图定位城市闪烁特效的基本步骤。你可以根据需要进行二次修改,比如调整闪烁速度、改变标记样式等,以适应不同的项目需求。这个特效结合了jQuery(尽管在这个案例中未直接使用)、CSS特效和...

Global site tag (gtag.js) - Google Analytics