Tworzenie obiektów w dowolnym położeniu

Question

Witam mam taki pewien problem. Dla uproszczenia załóżmy że mam div-a a wielkość 10 na 10px. I teraz chciałbym w nim stworzyć kilka kwadratów o wielkościach 1na1px na różnych pozycjach dodatkowo muszą to być div-y. I czy jest lepszy sposób na to niż stworzenie 100 div-ów, ponumerowanie ich za pomocą id i wyszukiwanie odpowiedniego?

Answer 1

Pytanie co chcesz osiągnąć przez takie tworzenie div? Jeśli chodzi o kwestie wizualizacji jakiś graficznych "kwadratów" to dlaczego w ogólne na div'ach? Polecałbym raczej pomyśleć o canvas, ewentualnie svg (zależy co potem chcesz z tym robić).

A jeśli już koniecznie div to możesz ewentualnie stworzyć tylko kilka div (tyle ile potrzebujesz) i dla elementu nadrzędnego dać position: relative, a dla tych "małych" position: absolute i odpowiednio bawić się pozycjonowaniem (top, left, right, bottom).

A i jeszcze jedno... jeśli chcesz już bawić się na div to zapewne będziesz im nadawał background-color i być może też border. Jeśli tak to wyguglaj sobie hasło box-sizing: border-box (jest sporo o tym w sieci więc nie będę tutaj wszystkiego omawiał).

Pozdrawiam

Comments

Jeśli chodzi co chcę osiągnąć to ma być to coś w rodzaju mapy na której w odpowiednich miejscach tutaj kwadraciki 1x1 pojawi się wioska. Oczywiście wszystko będzie większe i tak ten mały kwadrat będzie miał 50x50px i swoją własną grafikę. Coś w stylu mapy z gier przeglądarkowych typu plemiona Link.

---

No to może tym bardziej canvas? Na canvas możesz pobierać współrzędne myszy względem elementu canvas co pozwala na pewnego rodzaju interaktywność.

---

Zrobiłem to tak:

for(var obj in data)
           {
               var square =  map_warapper.appendChild(document.createElement('div'));
               square.classList.add('village_square');
               square.style.top = data[obj].pos_y * 50 + 'px';
               square.style.left = data[obj].pos_x * 50 + 'px';
           }

Gdzie data są to dane otrzymywane z bazy danych przez ajax. Teraz w prosty sposób mogę dodać do każdego elementu addEventListener który będzie wykonywał jedną funkcję z parametrem którym jest ID wioski z bazy danych.