EN
JavaScript - calculate the center of gravity of the elements
15 points
In this article, we would like to show how to calculate the center of gravity (middle point) of the elements using JavaScript.
Quick solution:
xxxxxxxxxx1
function caculateMiddlePoint(elements) {2
var sumX = 0;3
var sumY = 0;4
5
for (var i = 0; i < elements.length; ++i) {6
var element = elements[i];7
8
var middleX = element.offsetLeft + 0.5 * element.offsetWidth;9
var middleY = element.offsetTop + 0.5 * element.offsetHeight;10
11
sumX += middleX;12
sumY += middleY;13
}14
15
return {16
x: sumX / elements.length,17
y: sumY / elements.length18
};19
}
To use above caculateMiddlePoint() function it is necessary to provide elements as argument.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 300px;8
}9
10
div.box {11
position: fixed;12
}13
14
#box-1 {15
left: 70px; top: 70px; background: #00c700; width: 120px; height: 54px;16
}17
18
#box-2{19
left: 300px; top: 50px; background: yellow; width: 138px; height: 162px;20
}21
22
#box-3{23
left: 30px; top: 250px; background: #3879C8; width: 300px; height: 30px;24
}25
26
</style>27
</head>28
<body>29
<div id="box-1" class="box">Box 1</div>30
<div id="box-2" class="box">Box 2</div>31
<div id="box-3" class="box">Box 3</div>32
<script>33
34
function caculateMiddlePoint(elements) {35
var sumX = 0;36
var sumY = 0;37
38
for (var i = 0; i < elements.length; ++i) {39
var element = elements[i];40
41
var middleX = element.offsetLeft + 0.5 * element.offsetWidth;42
var middleY = element.offsetTop + 0.5 * element.offsetHeight;43
44
sumX += middleX;45
sumY += middleY;46
}47
48
return {49
x: sumX / elements.length,50
y: sumY / elements.length51
};52
}53
54
55
// Usage example:56
57
var boxElements = document.querySelectorAll('.box');58
var middlePoint = caculateMiddlePoint(boxElements);59
60
console.log('x: ' + middlePoint.x + ', y: ' + middlePoint.y);61
62
</script>63
</body>64
</html>