Languages
[Edit]
PL

JavaScript - obliczanie ┼Ťrodka ci─Ö┼╝ko┼Ťci dla wskazanych elementów drzewa dom

5 points
Created by:
Wayne
265

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.

┼Ürodek ci─Ö┼╝ko┼Ťci elemet├│w obliczony w JavaScript.
┼Ürodek ci─Ö┼╝ko┼Ťci elemet├│w obliczony w 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>
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join