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

浅浅的花香味﹌ 2022-10-05 11:57 122阅读 0赞

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 ：元素内容区高度加上下内边距的高度

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

![435802cc4624ae8676672a8a6edfc756.png][]

3、滚动大小

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

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

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

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

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

![ee43f64953011bed927533a6054017bd.png][]

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

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

[435802cc4624ae8676672a8a6edfc756.png]: /images/20221005/1b6c3e10b31f40f09189aaba204fd740.png
[ee43f64953011bed927533a6054017bd.png]: /images/20221005/00ece32137f94e8faeb89480c86c3997.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关修改图片大小像素比例

相关 html像素绘制文字,html5 – 在Canvas上绘制的文本的抗锯齿效果差

相关 html字体整体偏移,html - 跨度元素向右偏移（0.25 x字体高度）像素 - 堆栈内存溢出...

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

相关 MFC获取屏幕大小及像素信息

相关 html5＜canvas操作像素实例之渐变＞

相关 JS调整html元素大小

相关 HTML基础 --- HTML元素

相关 CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

相关 CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport