<JavaScript>尺寸类样式的获取
尺寸类样式的获取
offsetHeight
HTMLElement.offsetHeight
是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。(content+padding+border)通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。
对于文档的body对象,它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。
如果元素被隐藏(例如 元素或者元素的祖先之一的元素的style.display被设置为none),则返回0
-
语法
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
-
实例
var hei = obox.offsetHeight;//返回一个整数数值
上面的图片中显示了scollbar和窗口高度的offsetHeight.但是不能滚动的元素可能会有一个很大的高度值,大于可以看见的内容。这些元素原则上是被包含在滚动元素之中的。所以,这些不能滚动的元素可能会因为scrollTop的值会被完全隐藏或者部分隐藏;
offsetWidth
HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度。一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。
content+padding+border
-
语法
var offsetWidth =element.offsetWidth;
这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用
element.getBoundingClientRect()
-
分类
-
假如元素无padding无滚动无border
offsetWidth = clientWidth = style.width
-
假如元素有padding无滚动有border
offsetWidth = style.width + style.padding*2 + border宽度*2
-
假如元素有padding有滚动,有border,且滚动是显示的
offsetWidth = style.width + style.padding*2 + (border-width)*2 offsetWidth = clientWidth + 滚轴宽度 + border宽度*2
offsetHeight同理
-
-
实例
var wid = obox.offsetWidth;//返回一个整数数值
clientWidth
clientWeight是一个只读属性。尺寸范围为:padding+content
内联元素以及没有 CSS 样式的元素的
**clientWidth**
属性值为 0。**Element.clientWidth**
属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。
-
语法
var intElemClientWidth = element.clientWidth; //intElemClientWidth 是一个整数,表示元素的 clientWidth。
-
分类
-
假如元素无padding无滚动
clientWidth = style.width
-
假如元素有padding无滚动
clientWidth = style.width + style.padding*2
-
假如元素有padding有滚动,且滚动是显示的
clientWidth = style.width + style.padding*2 - 滚动轴宽度
clientHeight同理
-
-
实例
var cw = obox.clientWidth;//返回一个整数数值
clientHeight
clientHeight是一个只读属性。尺寸范围为:padding+content
-
语法
var intElemClientHeight = element.clientHeight; //intElemClientHeight 是一个整数,表示元素的 clientHeight。
-
实例
var ch = obox.clientHeight;//返回一个整数数值
offsetTop
HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其
offsetParent
元素的顶部内边距的距离。相对于页面或包含块偏移的位置
-
语法
topPos = element.offsetTop;
-
实例
var d = document.getElementById("div1"); var topPos = d.offsetTop; if (topPos > 10) { // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px }
offsetLeft
HTMLElement.offsetLeft 为只读属性,它返回当前元素相对于其
offsetParent
元素的左边内边距的距离。相对于页面或包含块偏移的位置
-
语法
leftPos = element.offsetLeft;
-
实例
var d = document.getElementById("div1"); var topLeft = d.offsetLeft; if (topLeft > 10) { // div1 距离它的 offsetParent 元素的顶部的距离大于 10 px }
以上属性只能获取不能设置
scrollTop
Element.scrollTop
属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的
scrollTop
值是这个元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop 值为0。
-
语法
// 获得滚动的像素数 var intElemScrollTop = someElement.scrollTop; // 设置滚动的距离 element.scrollTop = intValue;
-
实例
document.onclick = function(){ // console.log(obox.scrollTop); obox.scrollTop = 666; }
scrolLeft
Element.scrollLeft
属性可以读取或设置元素滚动条到元素左边的距离。注意如果这个元素的内容排列方向(
direction
) 是rtl
(right-to-left) ,那么滚动条会位于最右侧(内容开始处),并且scrollLeft值为0。此时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数(这个特性在chrome浏览器中不存在)。
-
语法
//获取滚动条到元素左边的距离 var sLeft = element.scrollLeft; //设置滚动条滚动了多少像素 element.scrollLeft = 10;
scrollLeft
可以是任意整数,然而:- 如果元素不能滚动(比如:元素没有溢出),那么
scrollLeft
的值是0。 - 如果给
scrollLeft
设置的值小于0,那么scrollLeft
的值将变为0。 - 如果给
scrollLeft
设置的值大于元素内容最大宽度,那么scrollLeft
的值将被设为元素最大宽度。
- 如果元素不能滚动(比如:元素没有溢出),那么
-
实例
document.onclick = function(){ // console.log(obox.scrollLeft); obox.scrollLeft = 666; }