Различная документация указывает на то, что я могу это сделать:
const e = document.createElement('div');
e.style.left = '100px';
e.style.top = '100px';
и, действительно, если я ввожу это в консоль браузера по одной строке за раз, это работает.
Однако, если я помещаю этот код в функцию и запускаю функцию из консоли браузера, я получаю сообщение об ошибке, сообщающее, что e.style не определен. Добавляем строку
e.style = '';
сразу после того, как createElement не имеет никакого эффекта. Я пробовал это в Chrome и Firefox.
Что работает (как индивидуально, так и в виде функции):
const e = document.createElement('div');
e.style = 'left:100px;top:100px;';
Почему?
РЕДАКТИРОВАТЬ: приведенный выше код действительно работает нормально; Я слишком упростил это. Вот короткий HTML-файл, демонстрирующий проблему. Якобы конструкторы Box и Nox делают то же самое. Но new Box() работает, а new Nox() — нет. Возможно, это что-то глупое. Но я этого не вижу...
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.stlye.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);
}
div.box {
position:absolute;
top:0;
left:0;
height:30px;
border:1px solid black;
display:flex;
align-items:center;
justify-content:center;
}
Подробнее здесь: https://stackoverflow.com/questions/798 ... javascript
