Elemente im Bereich

dUser

Mitglied
Guten Nachmittag,

und zwar ich habe ein kleines Problem:
Folgendes:
Ich möchte ich einen, von mir definierten Bereich, weitere divs hinzufügen.
Hierbei stehe ich vor folgenden Problemen:
-Zentrierung der hinzufügenden Div-Elemente
-Hinzufügen der Div-Elemente im übergeordneten Div Bereich.

HTML:
HTML:
        <body>
        <button onclick = "startGame()">Scripttest</button>
        <!--<p id = "output"></p>-->
        <div id = "viewArea" style = "margin: auto;"></div>
        </body>
JAVASCRIPT:
Javascript:
var gArea = window.document.createElement("div");
window.onload = function(){
gArea.setAttribute("style", "margin: auto; background: red; height: 600px; width: 500px;");
window.document.getElementById("viewArea").appendChild(gArea);
}
function startGame(){
  var gElement = window.document.createElement("div");
  var rndHeight = getRandomNumber(parseInt(gArea.style.height)-20, false);
  var rndWidth = getRandomNumber(parseInt(gArea.style.width)-20, false);
  console.log(rndHeight + "|" + rndWidth);
  gElement.setAttribute("style", "background: black; height: 20px; width: 20px; position: absolute; top:" + rndHeight + "px;left:" + rndWidth + "px;");
  gArea.appendChild(gElement);
}
CSS:
CSS:
body{
  text-align: center;
    font-family: arial;
}

Ich hoffe mir kann jemand hierbei behilflich sein.

Mit freundlichen Grüßen

-Jack001
 
Hi,

die Zentrierung der neuen Elemente ist bei deinem Konstrukt nicht möglich, da sie ja absolut über die Eigenschaften top und left angeordnet werden.

Das Hinzufügen könnte wie nachstehend gelöst. Die allgemeinen Formatierungen habe ich in CSS-Klassen ausgelagert, um Logik und Design weitestgehend zu trennen.

HTML:
HTML:
<button onclick = "startGame()">Scripttest</button>
<div id = "viewArea" style="margin: auto;"></div>

CSS:
CSS:
.gArea {
  position: relative;
  margin: auto;
  background: red;
  height: 600px;
  width: 500px;
}

.gElement {
  background: black;
  height: 20px;
  width: 20px;
  position: absolute;
}

JavaScript:
Javascript:
var gArea = window.document.createElement("div");
gArea.className = 'gArea';

window.onload = function(){
  window.document.getElementById("viewArea").appendChild(gArea);
}

function startGame(){
  var gElement = window.document.createElement("div"),
      computedStyle = window.getComputedStyle(gArea, null),
    rndHeight = parseInt(Math.random() * parseInt(computedStyle.getPropertyValue("height"))),
    rndWidth = parseInt(Math.random() * parseInt(computedStyle.getPropertyValue("width")));
 
  gElement.className = 'gElement';
  gElement.setAttribute("style", "top:" + rndHeight + "px; left:" + rndWidth + "px;");
  gArea.appendChild(gElement);
}

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Zurück