JavaScript：以像素为单位获取背景位置
Posted
技术标签:
【中文标题】JavaScript：以像素为单位获取背景位置【英文标题】：JavaScript: Get background-position in pixels 【发布时间】：2020-01-14 10:59:08 【问题描述】：我正在开发一个 javascript 动画库并遇到了一个问题：所有值通常使用此默认函数以 像素 为单位返回：
window.getComputedStyle(element).getPropertyValue(property);
但是，当像这样获取背景位置的值时：
window.getComputedStyle(element).getPropertyValue('background-position');
结果是50% 50%（背景位置：中心）。如何将值转换为像素？我编写了以下函数，但它给了我错误的结果，原因是背景位置的百分比也与图像大小有关。
var pixelsX = (parseFloat(percentX) / 100 * element.offsetWidth) + 'px';
var pixelsY = (parseFloat(percentY) / 100 * element.offsetHeight) + 'px';
我也无法使用 Image() 获得大小，因为计算必须实时进行，我不能等待图像加载。
谢谢！
【问题讨论】：
问题是在某些情况下我可能知道图像的大小，我需要在不加载图像的情况下计算它。 位置是相对于容器和“背景大小”的，在我的例子中是“自动”，所以我不知道背景的大小。 如果我的容器是 100px x 100px 并且“背景位置”设置为“50% 50%”，则转换将为“50px 50px”。这不等于“50% 50%”，因为它将背景图像的左上角设置为“50px 50px”。 对于后一个问题，由于没有加载图像，您就不能使用 onLoad 启动动画吗？<body onload="startAnimation()">
您要么知道图像的大小，要么知道背景大小的值来进行计算。更多细节在这里：***.com/a/51734530/8620333 您将在“像素值与百分比值之间的关系”部分中找到公式
【参考方案1】：
我确实尝试过您的代码并且它有效... 这不是准确的尺寸吗？ 我在不同的屏幕尺寸上检查过，看起来很准确。
请看：
var demoDiv = document.getElementById('divDemo');
var demoCalc = window.getComputedStyle(demoDiv).getPropertyValue('background-position');
var pixelsX = (parseFloat(demoCalc) / 100 * demoDiv.offsetWidth) + 'px';
var pixelsY = (parseFloat(demoCalc) / 100 * demoDiv.offsetHeight) + 'px';
console.log(demoCalc);
console.log(pixelsX);
console.log(pixelsY);body height: 100vh; width: 100vw; overflow: hidden
#divDemo
height: 100%; width: 100%;
background-image: url(https://images.unsplash.com/photo-1554056588-6c35fac03654?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80);
background-position: 50% 50%;
background-repeat: no-repeat;
<div id="divDemo"></div>关于这个主题的更多信息here
【讨论】：
这将始终给出相同的值whataver图像但值取决于图像大小 在我的桌面上使用不同屏幕尺寸的 Firefox（使用 ctrl+m 魔法）它显示了不同的结果：显示 480 X 320 (232px ,152px) 而在 1000 X 800 上显示 (492px, 392px )。 我说的是图像，而不是屏幕尺寸。对于一种屏幕尺寸，您将始终具有相同的值，这是错误的，因为它应该是基于图像的不同值……如果我们考虑像素值，则 50x50 图像与 500x500 图像的位置不同（相关：@ 987654322@) 抱歉我的无知，但是当我将位置更改为：10% 10% 这给了我其他结果。这是什么？容器位置还是图像？ 在背景位置处理百分比值时，需要考虑两个因素：图像 size 和容器 size。你需要他们两个来找到这个位置。尝试使用具有不同 size 的两个不同图像并考虑相同的 background-position 值并查看两者的放置方式不同，但您的代码将给出相同的结果，因为它不考虑图像大小.【参考方案2】：如果你只需要元素的位置，不妨试试这个：
element.getBoundingClientRect(); （来源：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect）
您可以获得每个角的位置以及元素的尺寸，如下所示： element.getBoundingClientRect().left;
这将返回属性：left、top、right、bottom、x、y、width 和 height。 全部以像素为单位！
【讨论】：
以上是关于JavaScript：以像素为单位获取背景位置的主要内容，如果未能解决你的问题，请参考以下文章