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'; }
}
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().
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
This question is related to
javascript
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.
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);.
You need to call the appendChild function to append your new element to an existing element in the DOM.
Others have given you the answer about 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.
I found this page when I was trying to set the backgroundImage attribute of a div, but hadn't wrapped the backgroundImage value with url(). This worked fine:
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);
}
Source: Stackoverflow.com