今天我写了这个函数:
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
答案 0 :(得分:78)
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
来表示不同的元素(覆盖函数中的值),这可能会令人困惑。
答案 1 :(得分:15)
yourElement.setAttribute("style", "background-color:red; font-size:2em;");
或者您可以将该元素编写为纯HTML并使用.innerHTML = [raw html code]
......但这非常难看。
在回答您的第一个问题时,首先使用var myElement = createElement(...);
,然后执行document.body.appendChild(myElement);
。
答案 2 :(得分:2)
您需要调用appendChild
函数将新元素追加到DOM中的现有元素。
答案 3 :(得分:1)
其他人给了你关于appendChild的答案。
在未打开的页面上调用document.write()
(例如已完成加载)首先调用document.open()
,这会清除文档的整个内容(包括调用document.write的脚本),因此很少这样做是个好主意。
答案 4 :(得分:0)
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);
}