javascript createElement(), le style de problème

aujourd'hui, j'ai écrit cette fonction:

 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. J'ai essayé d'utiliser createElement() et appendChild() fonctions au lieu de cela :

     var ob = `""`;
document.write(ob);

    mais la fonction ne fonctionne pas, comment faire pour qu'il fonctionne avec createElement().

  2. est-il possible d'ajouter tout en style avec une ligne de code avec de la 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";

Aperçu: JsFiddle

InformationsquelleAutor John | 2011-05-08
  1. 81

    Fonctionne très bien:

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

    Vous pouvez également voir comment mettre le CSS dans un seul coup (en utilisant element.style.cssText).

    Je vous suggère d'utiliser un peu plus de sens des noms de variables et de ne pas utiliser le même nom pour les différents éléments. On dirait que vous êtes en utilisant obj pour les différents éléments (en écrasant la valeur de la fonction) et cela peut être source de confusion.

    • omg drôle, mais j'ai essayé la même chose à propos de 30 minutes il y a et il ne fonctionne pas (je pense que j'ai raté quelque chose).. c'est pourquoi j'ai utilisé le document.écrire... merci
    • Merci, c'est de travailler pour moi.
    InformationsquelleAutor Felix Kling
  2. 16
    yourElement.setAttribute("style", "background-color:red; font-size:2em;");

    Ou vous pourriez écrire l'élément HTML pur et l'utilisation .innerHTML = [raw html code]... c'est très laid si.

    En réponse à votre première question, utilisez d'abord var myElement = createElement(...);, alors vous ne document.body.appendChild(myElement);.

    • Je suppose que tu veux dire appendChild? appendElement n'existe pas...
    • Cela ne fonctionnent pas dans certaines versions d'Internet Explorer. La solution plus sûre est d'utiliser yourElement.style.cssText.
    InformationsquelleAutor ninjagecko
  3. 2

    Vous devez appeler la appendChild fonction pour ajouter votre nouvel élément à un élément existant dans les DOM.

    InformationsquelleAutor SLaks
  4. 1

    D'autres vous ont donné la réponse sur appendChild.

    Appel document.write() sur une page qui n'est pas ouvert (par exemple a la fin du chargement) premiers appels document.open() qui efface tout le contenu du document (y compris le script appelant document.d'écriture), il est donc rarement une bonne idée de le faire.

    InformationsquelleAutor RobG
  5. 0

    J'ai trouvé cette page quand j'ai essayé de définir la backgroundImage attribut d'une balise div, mais qu'il n'était pas emballé à l' backgroundImage valeur avec url(). Cela a bien fonctionné:

    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);
}
    InformationsquelleAutor duhaime