Javascript createElement(), проблема стиля
сегодня я написал эту функцию:
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
Ответы
Ответ 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
для разных элементов (переписывая значение в функции), и это может сбить с толку.
Ответ 2
yourElement.setAttribute("style", "background-color:red; font-size:2em;");
Или вы могли бы написать элемент как чистый HTML и использовать .innerHTML = [raw html code]
... это очень уродливо, хотя.
В ответ на ваш первый вопрос, сначала вы используете var myElement = createElement(...);
, тогда вы делаете document.body.appendChild(myElement);
.
Ответ 3
Вам нужно вызвать функцию appendChild
, чтобы добавить новый элемент к существующему элементу в DOM.
Ответ 4
Другие дали вам ответ о appendChild.
Вызов document.write()
на странице, которая не открыта (например, завершила загрузку), сначала вызывает document.open()
, который очищает весь контент документа (включая script call document.write), поэтому он редко бывает хорошим идея сделать это.