Почему браузер игнорирует поля на запрограммированных элементах? - PullRequest
Новая
       25

Почему браузер игнорирует поля на запрограммированных элементах?

0 голосов
/ 15 декабря 2018

Я хотел бы настроить HTML-страницу программно, используя JavaScript, но у меня возникла проблема с полями.Вот минимальный пример: 

window.onload = function() {

  var div0 = document.getElementById('box2');
  div0.style.border = '1px solid black';

  var div1 = document.createElement('div');
  div0.appendChild(div1);
  div1.innerHTML = "This is programmatic";
  div1.style.width = '300px';
  div1.style.height = '200px';
  div1.style.background = 'pink';
  div2.style.marginTop = '20px';
  div2.style.marginLeft = '20px';
};
<div id="box1" style="border:1px solid black">
  <div style="width:300px;height:200px;background:lightgreen;margin-left:20px;margin-top:20px">
    This is regular styled HTML</div>
</div>
<div id="box2"></div>

Отображается следующим образом:

Margin styles not operating

Программная версия (розовая)кажется, игнорирует поля.Есть ли что-то другое в элементе, который создан программно?Я не вижу различий в стилях, сообщенных для 2-х дел.

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Измените div2 на div1, и это сработает.В консоли был совет: index.html:18 Uncaught ReferenceError: div2 is not defined at window.onload

Бонус:

Определите ваши классы в файлах CSS и из JS, просто добавьте их так: 

div1.classList.add('myClass')
0 голосов
/ 15 декабря 2018

Это потому, что вы ссылались на переменную с именем div2 - которая не существует - если вы измените ее на div 1 - тогда она работает нормально. 

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
    <script>
        window.onload = function () {

            var div0 = document.getElementById('box2');
            div0.style.border='1px solid black';

            var div1 = document.createElement('div');
            div0.appendChild(div1);
            div1.innerHTML="This is programmatic";
            div1.style.width='300px';
            div1.style.height='200px';
            div1.style.background='pink';
            div1.style.marginTop='20px'; // I altered this line
            div1.style.marginLeft='20px'; // I altered this line
        };
    </script>
  </head>
  <body>
    <div id="box1" style="border:1px solid black">
      <div style="width:300px;height:200px;background:lightgreen;margin-left:20px;margin-top:20px">
        This is regular styled HTML</div>
      </div>
    <div id="box2"></div>
  </body>
</html>
...