Home Communities
IT Knowledge
Inspiration
Languages
EN

# JavaScript - calculate the center of gravity of the elements

15 points
Created by:
1510

In this article, we would like to show how to calculate the center of gravity (middle point) of the elements using JavaScript.

Quick solution:

``````function caculateMiddlePoint(elements) {
var sumX = 0;
var sumY = 0;

for (var i = 0; i < elements.length; ++i) {
var element = elements[i];

var middleX = element.offsetLeft + 0.5 * element.offsetWidth;
var middleY = element.offsetTop +  0.5 * element.offsetHeight;

sumX += middleX;
sumY += middleY;
}

return {
x: sumX / elements.length,
y: sumY / elements.length
};
}``````

## Practical example

To use above `caculateMiddlePoint()` function it is necessary to provide elements as argument.

``````// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<style>

body {
height: 300px;
}

div.box {
position: fixed;
}

#box-1 {
left: 70px; top: 70px; background: #00c700; width: 120px; height: 54px;
}

#box-2{
left: 300px; top: 50px; background: yellow; width: 138px; height: 162px;
}

#box-3{
left: 30px; top: 250px; background: #3879C8; width: 300px; height: 30px;
}

</style>
<body>
<div id="box-1" class="box">Box 1</div>
<div id="box-2" class="box">Box 2</div>
<div id="box-3" class="box">Box 3</div>
<script>

function caculateMiddlePoint(elements) {
var sumX = 0;
var sumY = 0;

for (var i = 0; i < elements.length; ++i) {
var element = elements[i];

var middleX = element.offsetLeft + 0.5 * element.offsetWidth;
var middleY = element.offsetTop +  0.5 * element.offsetHeight;

sumX += middleX;
sumY += middleY;
}

return {
x: sumX / elements.length,
y: sumY / elements.length
};
}

// Usage example:

var boxElements = document.querySelectorAll('.box');
var middlePoint = caculateMiddlePoint(boxElements);

console.log('x: ' + middlePoint.x + ', y: ' + middlePoint.y);

</script>
</body>
</html>``````

## Alternative titles

Join to our subscribers to be up to date with content, news and offers.