`
qm4050
  • 浏览: 78558 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

分享到:
评论

相关推荐

    屏幕取色器,CSS取色工具。

    总的来说,"屏幕取色器"和"CSS取色工具"是设计工作中的得力助手,它们能够帮助用户精确、快速地获取屏幕颜色,并转化为适用于CSS的代码,从而提升设计工作的精度与效率。"PS必备"的标签更是强调了这款工具在图形设计...

    css 取色工具

    "CSS取色工具"就是这样一个实用程序,它帮助开发者和设计师方便地从屏幕上选取颜色,并自动生成相应的颜色代码,以便在CSS中使用。 这个工具的主要功能包括: 1. **实时取色**:用户只需运行工具,然后将光标移动...

    web开发CSS取色器

    一个CSS取色器工具是开发者必备的辅助工具之一,它可以帮助设计师和前端工程师快速、精确地获取屏幕上任何颜色的CSS表示,以便应用于网页设计中。在这里,我们将深入探讨CSS取色器的工作原理、用途以及如何使用。 1...

    前端开发人员,css样式取色器

    总的来说,"前端开发人员,css样式取色器"是一个强大的辅助工具,它简化了前端开发中的颜色选取过程,提升了开发效率,同时增强了开发者对颜色的控制能力,为高质量的网页设计和开发提供了有力的支持。

    CSS,C#,取色工具

    在IT行业中,颜色选择和管理是网页设计和开发过程中至...总之,无论是在CSS的样式编写还是C#的编程实践中,取色工具都是必不可少的辅助工具。它们简化了颜色选取的过程,提高了工作效率,使得色彩管理更加精确和便捷。

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    css各种高级实例+源码

    CSS核心基础 第0课《CSS设计彻底研究》简介 CSS与(X)HTML核心基础(上) CSS与(X)HTML核心基础(中) CSS与(X)HTML核心基础(下) CSS禅意花园介绍 深入CSS盒子模型 深入理解盒子模型(上) 深入理解盒子模型(下) ...

    react-ReactSizes轻松将window大小高和宽映射到props

    在实际应用中,`react-sizes`可以与CSS预处理器(如Sass、Less)或CSS模块结合使用,通过props传递的窗口尺寸来动态计算样式。此外,它还可以配合媒体查询,实现更复杂的响应式布局。 使用`react-sizes`的一个关键...

    svg转css,css转svg,svg与css互相转换并压缩

    SVG是一种基于XML的矢量图像格式,能够提供高质量、可缩放的图形,而CSS则用于定义网页的样式和布局。在某些情况下,开发者可能需要将SVG转换为CSS,或者反过来,以便更好地管理和优化资源。同时,为了提高性能和...

    Reset_CSS css样式重置文件

    CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...

    CSS的高级应用实例

    CSSchange Ajax的局部更新。 CSSglass 用CSS制作会发光的字体。 CSSmenu 用Ajax+CSS制作动态菜单。 CSSshadow 用CSS制作投影效果。

    CSS中常用的 reset.css文件

    因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...

    CSS CSS CSS

    CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装

    CSS Secrets CSS 魔法

    CSS Secrets 一书是专为那些正从中级向高级进阶的CSS开发者所准备的,书中涵盖了47个未公开的技巧和技术。...总之,CSS Secrets不仅是一本关于CSS的实用指南,更是一本引导开发者走向更高层次的技术作品。

    [精通CSS高级Web标准解决方案

    [精通CSS高级Web标准解决方案[精通CSS高级Web标准解决方案[精通CSS高级Web标准解决方案[精通CSS高级Web标准解决方案[精通CSS高级Web标准解决方案[精通CSS高级Web标准解决方案

    CSS新世界1

    【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...

    CSS:The Definitive Guide, 4th Edition[CSS权威指南](英文版)

    《CSS权威指南》第四版是CSS领域的重要著作,作者Eric A. Meyer凭借其深厚的行业经验和智慧,对CSS的各个方面进行了详尽的探讨。 本书从基础讲起,逐步深入到CSS的核心概念与应用。CSS权威指南第四版涵盖了CSS的...

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

Global site tag (gtag.js) - Google Analytics