javascript createElement(), style problem

Question

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 :

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

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

You can also see how to set the the CSS in one go (using 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 obj for different elements (overwriting the value in the function) and this can be confusing.

Answer 2

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.

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