javascript createElement()，样式问题答案

【问题标题】：javascript createElement(), style problemjavascript createElement()，样式问题
【发布时间】：2011-05-08 10:56:55
【问题描述】：

今天我写了这个函数：

 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'; }
        }

我尝试使用 createElement() 和 appendChild() 函数来代替这个：
```
 var ob = `""`;
            document.write(ob);
```
但是函数不起作用，如何使它与 createElement() 一起工作。
是否可以使用纯 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

【问题讨论】：

标签： javascript

【解决方案1】：

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

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

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

【讨论】：

omg 很有趣，但我在 30 分钟前尝试了同样的事情，但没有成功（我想我错过了一些东西）..这就是我使用 document.write 的原因......谢谢
这正是我所需要的，感谢您提供的信息。
为什么我们不能使用obj.className = 'some class'
@PhanendraCharyuluKanduri：你也可以这样做。

【解决方案2】：

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

或者您可以将元素编写为纯 HTML 并使用 .innerHTML = [raw html code]... 但这很丑。

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

【讨论】：

这在某些版本的 Internet Explorer 中不起作用。更安全的解决方案是使用yourElement.style.cssText。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

在未打开的页面上调用document.write()（例如已完成加载）首先调用document.open()，这会清除文档的全部内容（包括调用document.write的脚本），因此很少有一个好主意这样做。

【讨论】：

【解决方案5】：

我在尝试设置 div 的 backgroundImage 属性时发现了此页面，但没有使用 url() 包装 backgroundImage 值。这很好用：

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

【讨论】：