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

页面宽度的定义

    博客分类:
  • 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

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均无关)

分享到:
评论

相关推荐

    css table width表格宽度样式设置定义.docx

    css 表格宽度样式设置定义 css 表格宽度样式设置定义是 Web 开发中一个基本而又重要的概念。... 一、HTML table 标签内宽度定义 ...这将定义一个变量 $width,并将其应用于 table 标签的宽度定义。

    HTML5-JS 超出页面宽度部分的菜单栏转为下拉列表.rar

    在网页设计中,一个常见的挑战是如何处理横向菜单或列表,特别是当它们的宽度超过浏览器窗口时。本示例“HTML5-JS 超出页面宽度部分的菜单栏转为下拉列表.rar”提供了一个解决方案,它利用HTML5和JavaScript技术,将...

    WEB标准化页面制作指南.doc

    3. 页面宽度定义 在WEB页面制作中,页面宽度的定义是非常重要的。页面宽度的定义需要考虑到不同的浏览器和设备,以确保页面的兼容性和可读性。 4. 页面制作指南 在WEB页面制作中,需要遵循一定的指南,以确保页面...

    自适应网页宽度的js焦点图左右切换特效.rar

    【自适应网页宽度的js焦点图左右切换特效】是一种常见的网页设计元素,它通常用于展示一组图片或内容,用户可以通过点击或自动轮换来浏览。在本案例中,这个特效是利用jQuery库实现的,jQuery是一个广泛使用的...

    javaweb表格宽度

    Bootstrap的列(Column)类可以用来创建响应式布局,通过`.col-*`类来定义不同屏幕尺寸下的宽度。 3. **JavaScript/jQuery动态调整** 当需要根据用户交互或者数据量动态改变表格宽度时,可以使用JavaScript或...

    网页设计中对于尺寸的设定

    4. 页面长度建议不超过3屏,宽度不超过1屏。 此外,还有各种广告尺寸规范,如: - 120*120和120*60适合产品或新闻展示。 - 120*90适用于产品演示或大型LOGO。 - 125*125适合照片效果的广告。 - 234*60和392*72常...

    css+div自适应窗口宽度

    本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度,确保无论用户浏览器窗口大小如何,页面都能保持良好的显示效果。 首先,我们要理解`min-width`属性。在示例代码中,`.divGlobal`, `.DivTop`, `....

    css控制div的宽度

    设置div的宽度可以帮助我们精确地调整元素在页面上的展示大小,从而实现更加灵活的布局。 1. 直接设置宽度: 你可以直接通过width属性为div设置一个固定值,例如: ```css div { width: 200px; } ``` 这将使...

    jquery自动适应页面宽度的导航菜单代码下载.zip

    "jquery自动适应页面宽度的导航菜单代码下载.zip"这个资源正是针对这一需求提供的一种解决方案。 jQuery是一个强大的JavaScript库,它简化了JavaScript编程,使得实现复杂的交互和动画效果变得更加容易。在这个...

    自适应网页宽度jquery焦点图.zip

    【自适应网页宽度jQuery焦点图】是一种常见的网页设计技术,用于在网站上展示一组图片或内容,通过自动轮播和导航点切换,为用户提供丰富的视觉体验。jQuery库因其易用性和强大的功能,常被用于实现这类效果。在这个...

    生成网页缩略图(输入网址,宽度,高度生成缩略图)

    网页缩略图生成技术是一种常见的Web开发功能,它允许用户通过输入网址、设定目标宽度和高度,快速获取网站页面的预览图片。这种技术在许多应用场景中非常实用,例如社交媒体分享、搜索引擎结果展示、网站目录索引等...

    css网页属性语法定义及应用方法

    ### CSS网页属性语法定义及应用方法 #### 一、引言 CSS(Cascading Style Sheets)即层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    HTML 和 CSS 是构建网页布局的基础,滚动条在默认情况下会占据内容区域的一部分宽度,这可能会导致页面布局的不理想。本教程将详细讲解如何通过 HTML 和 CSS 技巧实现滚动条不挤占内容区宽度,让网页布局更加美观且...

    jquery实现动态改变div宽度和高度

    在当今Web开发中,动态修改页面元素的尺寸是一个非常常见的需求,尤其是在响应式设计中,我们经常需要根据不同设备或用户的操作来调整元素的宽度和高度。本文将介绍如何使用jQuery来实现动态改变div的宽度和高度。...

    div宽度自适应布局(左边自适应)

    在网页设计中,"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术,它主要应用于响应式设计,使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...

    固定宽度表格布局设定宽度问题

    在网页设计中,固定宽度的表格布局是一种常见的需求,它能确保内容在不同屏幕尺寸下保持一致的显示效果。本文将深入探讨如何设置表格的固定宽度,并解决可能遇到的问题。 首先,我们需要理解HTML中的`<table>`元素...

    CSS自适应宽度按钮

    最后,如果你的项目使用了框架如Bootstrap,你可以利用其内置的栅格系统和预定义的按钮类来实现自适应宽度。例如,使用Bootstrap的`btn-block`类可以使按钮占据整个容器的宽度: ```html 自适应宽度按钮 ``` 综上...

    变换宽度的轮播.rar

    【标题】"变换宽度的轮播.rar"是一个关于网页设计的资源包,主要涉及的是一个具有动态宽度变化效果的轮播图(Carousel)实现。在网页设计中,轮播图是一种常见的展示多张图片或内容的方式,通过自动切换或者用户交互...

    javascript 获取网页高度宽度.pdf

    在JavaScript中获取网页的高度和宽度是常见的需求,这有助于我们进行页面布局、滚动条处理或者自适应设计。以下是一些关于如何使用JavaScript获取网页高度、宽度以及滚动位置的关键知识点。 1. **获取窗口滚动位置...

    jquery自动图片最大宽度

    在这个场景下,我们可以通过jQuery来动态调整图片的宽度,使其不超过容器的最大宽度,从而保持页面布局的整洁和美观。 首先,我们需要在HTML结构中定义图片元素,并为其设置一个父级容器。这样我们可以通过控制父级...

Global site tag (gtag.js) - Google Analytics