html上一个字母多大像素,HTML 元素大小

1、元素的偏移量

元素的可见大小是由其高度、宽度决定，包括所有的内边距、滚动条和边框大小(不包括外边距)。

offsetHeight ：元素在垂直方向上占用的空间大小，以像素计算。包括元素的高度，水平滚动条高度，上下边框高度。

offsetWidth ：元素在水平方向上占用的空间大小，以像素计算。 包括元素的宽度，垂直滚动条高度，左右边框高度。

offsetLeft ：元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop ：元素的上外边框至包含元素的上内边框之间的像素距离。

offsetParent ：元素的包含元素。元素的offsetParent不一定和parentNode相等。例如，

元素的offsetParent是祖先元素

偏移量属性是只读属性，每次访问都需要重新计算。

function getElementLeft(element){

var actualLeft = element.offsetLeft;

var current = element.offsetParent;

while(current != null){ // 循环至根元素

actualLeft += current.offsetLeft;

current = current.offsetParent;

}

return actualLeft;

}

function getElementTop(element){

var actualTop = element.offsetTop;

var current = element.offsetParent;

while(current != null){ // 循环至跟元素

actualTop += current.offsetTop;

current = current.offsetParent;

}

return actualTop;

}

上述两个方法在简单的页面布局中，结果很准确，但对于使用表格和内嵌框架布局的页面，不同浏览器实现不同，结果也会有些不同。

2、元素的客户区大小

元素的客户区大小值得是元素内容及其内边距所占据的空间大小，不计滚动条所占空间。

clientWidth ：元素内容区宽度加左右内边距的宽度

clientHeight ：元素内容区高度加上下内边距的高度

这个最常用来确定浏览器视口的大小。客户区大小是只读属性，每次访问都需要重新计算。

3、滚动大小

滚动大小指的是包含滚动内容的元素大小。

scrollHeight ：滚动元素高度，没有滚动条的情况下，是元素内容的总高度

scrollWidth ：滚动元素的宽度，没有滚动条的情况下，是元素内容的总宽度

scrollLLeft ：被隐藏在内容区左侧的宽度，可读可设置

scrollTop ：被隐藏在内容区上方的高度，可读可设置

//获取文档总高度/总宽度

function getPageDimension(){

if(document.compatMode == "BackCompat"){ // 混杂模式

return {

width:Math.max(document.body.scrollWidth,document.body.clientWidth),

height:Math.max(document.body.scrollHeight,document.body.clientHeight)

};

} else {

return {

width:Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),

height:Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)

}

}

}

//将元素回滚到顶部

function scrollToTop(element){

if(element.scrollTop != 0){

element.scrollTop = 0;

}

}

4、元素大小

IE、Firefox、Safari、Opera、Chrome为每个元素都提供了一个getBoundingClientRect() 方法。返回一个矩形对象，表示元素相对于视口的位置，有四个属性：

left：元素左边框至视口的左侧的距离

right：元素右边框至视口左侧的距离

top：元素上边框至视口上侧的距离

bottom：元素下边框至视口上侧的距离

所以，right - left 是元素的宽度，bottom - top 是元素的高度

function getBoundingClientRect(element){

var scrollTop = document.documentElement.scrollTop;

var scrollLeft = document.documentElement.scrollLeft;

if(element.getBoundingClientRect){

if(typeof arguments.callee.offset != "number"){

var temp = document.createElement("div"); // IE8 - 中文档左上角的坐标是(2，2)，其他是(0，0)

temp.style.position = "absolute";

temp.style.left = "0px";

temp.style.top = "0px";

//temp.style.cssText = "position:absolute;left:0;top:0";

document.body.appendChild(temp);

arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;

document.body.removeChild(temp);

}

var rect = element.getBoundingClientRect();

var offset = arguments.callee.offset;

return {

left:rect.left + offset,

right:rect.right + offset,

top:rect.top + offset,

bottom:rect.bottom + offset

};

} else {

var actualLeft = getElementLeft(element);

var actualTop = getElementTop(element);

return {

left:actualLeft - scrollLeft,

right:actualLeft + element.offsetWidth - scrollLeft,

top:actualTop - scrollTop,

bottom:actualTop + element.offsetHeight - scrollTop

}

}

}

标签：元素,element,current,var,HTML,大小,document,边框

来源： https://www.cnblogs.com/zhanglw456/p/10538664.html