欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于CSS和JS中用到的各种Height和Width的问题

程序员文章站 2022-05-04 13:46:37
自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比. 1.除非调整显示器的分辨率,否则这个值可以看作常量,不会发生变化。 2.显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率。 如果有错误,麻烦您指出,相互学习. 谢谢~~ ......

自己记不住,列一下关于css和js中用到的各类有关height和width属性的介绍对比.

所属类别 属性名 意义 其他
浏览器模型 screen.height 浏览器窗口所在的屏幕的高度(单位像素)

1.除非调整显示器的分辨率,否则这个值可以看作常量,不会发生变化。

2.显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率。

screen.width 浏览器窗口所在的屏幕的宽度(单位像素)
screen.availheight 浏览器窗口可用的屏幕高度(单位像素) 因为部分空间可能不可用,比如系统的任务栏或者 mac 系统屏幕底部的 dock 区,这个属性等于height减去那些被系统组件的高度。
screen.availwidth 浏览器窗口可用的屏幕宽度(单位像素)
window.innerheight 返回网页在当前窗口中可见部分的高度(单位像素) 1.只读,用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。因为这时网页的像素大小不变(比如宽度还是960像素),只是每个像素占据的屏幕空间变大了,因为可见部分(视口)就变小了。
2.注意:这两个属性值包括滚动条的高度和宽度
window.innerwidth 返回网页在当前窗口中可见部分的宽度
window.outerheight 返回浏览器窗口的高度 包括浏览器菜单和边框(单位像素),只读
window.outerwidth 返回浏览器窗口的宽度
元素节点 element.clientheight 返回一个整数值,表示元素节点的 css 高度(单位像素) 1.只对块级元素生效,对于行内元素返回0。如果块级元素没有设置 css 高度,则返回实际高度。
2.除了元素本身的高度,它还包括padding部分,但是不包括border、margin。如果有水平滚动条,还要减去水平滚动条的高度。
3.注意,这个值始终是整数,如果是小数会被四舍五入。
element.clientwidth 返回元素节点的 css 宽度
element.scrollheight 表示当前元素的总高度(单位像素),包括溢出容器、当前不可见的部分 1.只读.
2.它包括padding,但是不包括border、margin以及水平滚动条的高度(如果有水平滚动条的话),还包括伪元素(::before或::after)的高度。
element.scrollwidth 表示当前元素的总宽度(单位像素)
element.offsetheight 表示元素节点的 css 高度(单位像素) 1.注意,这个值始终是整数,如果是小数会被四舍五入
2.只对块级元素生效,对于行内元素返回0。如果块级元素没有设置 css 高度,则返回实际高度。
3.了元素本身的高度,它还包括padding部分,但是不包括border、margin。如果有水平滚动条,还要减去水平滚动条的高度。
4.如果元素的 css 设为不可见(比如display: none;),则返回0。
element.offsetwidth 表示元素的 css 水平宽度(单位像素)
备注 1.document.documentelement的clientheight属性,返回当前视口的高度(即浏览器窗口的高度),等同于window.innerheight属性减去水平滚动条的高度(如果有的话)
2.document.body的高度则是网页的实际高度。一般来说,document.body.clientheight大于document.documentelement.clientheight
3.整张网页的总高度可以从document.documentelement.scrollheight或document.body.scrollheight上读取。

如果有错误,麻烦您指出,相互学习.

谢谢~~