JavaScript:获取以像素为单位的背景位置

Question

我在开发 JavaScript 动画库时遇到了一个问题:使用此默认函数通常以像素返回所有值:

window.getComputedStyle(element).getPropertyValue(property);

但是，当像这样获取 background-position 的值时:

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() 获取大小，因为计算必须实时进行，我不能等待图像加载。

谢谢!

Answer 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