javascript createElement (), проблема стиля

Question

сегодня я написал эту функцию:

 function zoom(obj){
            var img = (!document.getElementById(obj))?false:document.getElementById(obj);
            var fullImage = (img.getAttribute("image") == null)?false:img.getAttribute("image");
            if(!fullImage || !img) { return false; }
            if(!document.getElementById("::img")) {
            var ob = "<div id='::img' style='position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px solid #ddd;-moz-box-shadow: 0px 0px 8px #fff;display:none;'></div>";
            document.write(ob);}
            img.onmousemove = function(e) {
            var x = Math.floor(((e.pageX-7) - (img.offsetLeft - 8)) * 100 / img.width);
            var y = Math.floor(((e.pageY-7) - (img.offsetTop - 8)) * 100 / img.height);
            x = (x>100)?100:(x<0)?0:x;
            y = (y>100)?100:(y<0)?0:y;
            var ob = document.getElementById("::img");
            ob.style.background = "url('" + fullImage + "') no-repeat";
            ob.style.display = 'block';
            ob.style.backgroundPosition = x + '% ' + y + '%';
            ob.style.left = e.pageX + "px";
            ob.style.top = e.pageY + "px";
            }
            img.onmouseout = function() { document.getElementById("::img").style.display='none'; }
        }

1. Я пытался использовать функции createElement () и appendChild () вместо этого:

    var ob = `""`;
               document.write(ob);

   , нофункция не работает, как заставить ее работать с createElement ().

2. возможно ли добавить все стили с помощью однострочного кода с чистым JAVASCRIPT :

ob.style.background = "url('" + fullImage + "') no-repeat";
                ob.style.display = 'block';
                ob.style.backgroundPosition = x + '% ' + y + '%';
                ob.style.left = e.pageX + "px";
                ob.style.top = e.pageY + "px";

Предварительный просмотр: JsFiddle

Answer 1

Работает нормально:

var obj = document.createElement('div');
obj.id = "::img";
obj.style.cssText = 'position:absolute;top:300px;left:300px;width:200px;height:200px;-moz-border-radius:100px;border:1px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff;display:none;';

document.getElementById("divInsteadOfDocument.Write").appendChild(obj);

Вы также можете увидеть, как настроить CSS за один раз (используя element.style.cssText).

---

Я предлагаю вам использовать более значимые имена переменных и не использовать одно и то же имя для разных элементов.Похоже, вы используете obj для различных элементов (перезаписывая значение в функции), и это может сбить с толку.

Answer 2

yourElement.setAttribute("style", "background-color:red; font-size:2em;");

Или вы можете написать элемент в виде чистого HTML и использовать .innerHTML = [raw html code] ... хотя это очень уродливо.

В ответ на ваш первый вопрос, сначала вы используете var myElement = createElement(...);, затем выделать document.body.appendChild(myElement);.

Answer 3

Вам нужно вызвать функцию appendChild, чтобы добавить новый элемент к существующему элементу в DOM.

Answer 4

Другие дали вам ответ о appendChild.

Вызов document.write() на странице, которая не открыта (например, завершила загрузку), сначала вызывает document.open(), который очищает все содержимое документа (включая скрипт, вызывающий document.write), поэтому редко бывает хорошей идеей сделай это.

Answer 5

Я нашел эту страницу, когда пытался установить атрибут backgroundImage для div, но не обернул значение backgroundImage значением url(). Это работало нормально:

for (var i=0; i<20; i++) {
  // add a wrapper around an image element
  var wrapper = document.createElement('div');
  wrapper.className = 'image-cell';

  // add the image element
  var img = document.createElement('div');
  img.className = 'image';
  img.style.backgroundImage = 'url(http://via.placeholder.com/350x150)';

  // add the image to its container; add both to the body
  wrapper.appendChild(img);
  document.body.appendChild(wrapper);
}