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