Wie erstelle ich ein HTML-Element und lege seine Stilattribute in Javascript fest [geschlossen] ⇐ HTML

[Anonymous]

Verschiedene Dokumentationen scheinen darauf hinzudeuten, dass ich Folgendes tun kann:

Code: Select all

const e = document.createElement('div');
e.style.left = '100px';
e.style.top = '100px';

Und tatsächlich funktioniert es, wenn ich dies zeilenweise in eine Browserkonsole eingebe.
Wenn ich diesen Code jedoch in eine Funktion platziere und die Funktion über die Browserkonsole ausführe, erhalte ich eine Fehlermeldung, die besagt, dass e.style undefiniert ist. Hinzufügen der Zeile

Code: Select all

e.style = '';

direkt nach dem createElement hat keine Auswirkung. Ich habe das in Chrome und Firefox ausprobiert.
Was funktioniert (sowohl einzeln als auch in einer Funktion):

Code: Select all

const e = document.createElement('div');
e.style = 'left:100px;top:100px;';

Warum?
BEARBEITEN: Der obige Code funktioniert tatsächlich einwandfrei; Ich habe es zu stark vereinfacht. Hier ist eine kurze HTML-Datei, die das Problem veranschaulicht. Angeblich machen die Konstrukteure Box und Nox dasselbe. Aber new Box() funktioniert, new Nox() hingegen nicht. Vielleicht ist es etwas Dummes. Aber ich sehe es nicht...

Code: Select all

const boxes = [];

function Box(x, y, txt) {
const e = this.element = document.createElement('div');
e.className = 'box'
e.style = 'left:' + (this.x = (x || 0)) + 'px;top:' + (this.y = (y || 0)) + 'px;';
e.innerHTML = '' + txt + '
';
document.body.appendChild(e);
boxes.push(this);
}

function Nox(x, y, txt) {
const e = this.element = document.createElement('div');
e.className = 'box'
e.style.left = (this.x = (x || 0)) + 'px'; // x position of upper left
e.style.top = (this.y = (y || 0)) + 'px'; // y position of upper left
e.innerHTML = '
' + txt + '
';
document.body.appendChild(e);
boxes.push(this);
}
const box = new Box(50,100,'Box');
const nox = new Nox(150,200,'Nox');

Code: Select all

div.box {
position: absolute;
top: 0;
left: 0;
height: 30px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}