PL
JavaScript - obliczanie środka ciężkości dla wskazanych elementów drzewa dom
5
points
W tym artykule chcielibyśmy pokazać, jak w prosty sposób obliczyć polożenie punktu będącego środekiem cięzkości elemetów znajdujacych się na stronie internetowej. Do obliczeń użyjemy JavaScript.
Proste rozwiązanie (funkcja wynaczająca środek ciężkości wskazanych elementów):
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
};
}
Praktyczny przykład
Aby użyć powyższej funckji caculateMiddlePoint() niezbędne jest przekazanie jako argument kolekcji lub tablicy elemtów, znajdujacych się na stronie, dla któych poszukujemy środka.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<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>
</head>
<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
};
}
// Przykład użycia:
var boxElements = document.querySelectorAll('.box');
var middlePoint = caculateMiddlePoint(boxElements);
console.log('x: ' + middlePoint.x + ', y: ' + middlePoint.y);
</script>
</body>
</html>