javascript createElement()，样式问题

javascript createElement(), style problem

提问by John

today i wrote this function:

今天我写了这个函数：

 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. I tried to use createElement() and appendChild() functions instead of this :

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

   but function does't work, how to make it to work with createElement().

2. is it possible to add all style with one line code with pure JAVASCRIPT:

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";

Preview: JsFiddle

预览：JsFiddle

回答by Felix Kling

Works fine:

工作正常：

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);

You can also see how to set the the CSS in one go (using element.style.cssText).

您还可以了解如何一次性设置 CSS（使用element.style.cssText）。

---

---

I suggest you use some more meaningful variable names and don't use the same name for different elements. It looks like you are using objfor different elements (overwriting the value in the function) and this can be confusing.

我建议你使用一些更有意义的变量名，不要对不同的元素使用相同的名称。看起来您正在使用obj不同的元素（覆盖函数中的值），这可能会令人困惑。

回答by ninjagecko

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

Or you could write the element as pure HTML and use .innerHTML = [raw html code]... that's very ugly though.

或者您可以将元素编写为纯 HTML 并使用.innerHTML = [raw html code]...虽然这非常难看。

In answer to your first question, first you use var myElement = createElement(...);, then you do document.body.appendChild(myElement);.

在回答您的第一个问题时，首先使用var myElement = createElement(...);，然后使用document.body.appendChild(myElement);。

回答by SLaks

You need to call the appendChildfunction to append your new element to an existing element in the DOM.

您需要调用该appendChild函数将新元素附加到 DOM 中的现有元素。

回答by RobG

Others have given you the answer about appendChild.

其他人已经给了你关于 appendChild 的答案。

Calling document.write()on a page that is not open (e.g. has finished loading) first calls document.open()which clears the entire content of the document (including the script calling document.write), so it's rarely a good idea to do that.

调用document.write()一个网页，是不开放的（例如已完成加载）首先调用document.open()它清除文件（包括脚本调用文件撰写）的全部内容，所以它很少是个好主意来做到这一点。

回答by duhaime

I found this page when I was trying to set the backgroundImageattribute of a div, but hadn't wrapped the backgroundImagevalue with url(). This worked fine:

我在尝试设置backgroundImagediv的属性时发现了这个页面，但没有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);
}