Question

我想知道是否可以使用jQuery在特定的屏幕尺寸下获取元素的中心位置？

我要实现的功能是能够基于高度和宽度的输入来获取元素的中心位置。

例如，如果我提供屏幕尺寸（1440像素，980像素），我可以将这些值传递给函数并计算html元素的中心x和y位置在何处？

我有以下代码在页面加载时以当前屏幕尺寸计算元素的x和y中心位置，但是我希望能够在函数中传递屏幕尺寸并从那里计算元素的中心坐标点。（我不想使用resize（）函数。我希望能够在不调整屏幕大小的情况下计算坐标。）

<script>
var $this = $("#element");
var offset = $this.offset();
var width = $this.width();
var height = $this.height();

var window_height = $(window).height();
var window_width = $(window).width();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;

console.log(Math.round(centerX));
console.log(Math.round(centerY));
</script>

编辑：让我尝试提供一些我想做的事情的背景。我正在使用heatmap.js在网站屏幕快照上显示热图。屏幕截图的特定尺寸为1440px x 980px（或沿这些线的尺寸。）我希望能够计算坐标，在该坐标中，可以将热图覆盖在特定html元素上的屏幕截图上，以显示点击计数，但是屏幕截图大小不同于影响x和y坐标以及热图显示方式的基础网页大小。这就是我希望能够根据特定屏幕尺寸获取坐标的原因。

var points = [{x: 341, y: 881, value: 90}, {x: 720, y: 884, value: 10}, {x: 1100, y: 881, value: 20}, {x: 340, y: 1138, value: 1}, {x: 720, y: 1136, value: 15}, {x: 1100, y: 1140, value: 12}];

Answer 1

基于@Dacre anwser 的香草替代品

const eye = document.querySelector('.eye')
const { left, top, width, height } = eye.getBoundingClientRect()
const centerX = left + width / 2
const centerY = top + height / 2

Answer 2

您可以使用.getBoundingClientRect()来实现。根据MDN：

Element.getBoundingClientRect（）方法返回元素的大小及其相对于视口的位置。

尝试以下操作：

<script>
var $this = $("#element");
// [UPDATE] Use native getBoundingClientRect method
var offset = ($this[0]).getBoundingClientRect(); 
var width = $this.width();
var height = $this.height();

var window_height = $(window).height();
var window_width = $(window).width();

var centerX = offset.left - width / 2;    // [UPDATE] subtract to center
var centerY = offset.top - height / 2;   // [UPDATE] subtract to center

console.log(Math.round(centerX));
console.log(Math.round(centerY));
</script>

Answer 3

这个解决方案对我来说非常有效：

x: element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2,
y: element.getBoundingClientRect().top + document.documentElement.scrollTop + element.clientHeight / 2,

根据提供的屏幕尺寸获取元素的中心x和y位置

3 个答案: