pourquoi la fonction javascript ne fonctionne pas correctement

Question

i ont un objet dom qui ont une propriété nommée changeCss qui change le css sur tout élément: le code est le suivant:

var Dom = { 
changeCss : function(element, properties){ 
      if(typeof (properties) === "object"){ 

       var properties_name = Object.keys(properties), 
        properties_value = []; 

      for (var i = 0; i < properties_name.length ; i++ ){ 
       var a = properties_name[i], 
        b = properties[a]; 

        properties_value[i] = b; 

        element.setAttribute("style", a+":" + b+";"); 

      }; 

      }else{ 
       throw 'properties of '+ element +" should be object"; 
      } 
     }, 
} 

donc de ce code, vous serez comprendre comment je veux changer le CSS de n'importe quel élément, et cela fonctionne parfaitement. Mais le problème que je suis confronté est que si je suis en train d'écrire ce code:

var x = document.getElementById("some_html_tag_id"); 
Dom.changeCss(x, {"width": "100px", "height":"80px"}); 

alors l'élément de style se composent ne height:80px pas width:100px! comment ajouter toutes ces propriétés de style?

grâce

anni

Answer 1

tout d'abord remplacer

element.setAttribute 

avec

element.style[a]= b; 

Mais fondamentalement, vous devez comprendre que vous faites. La fonction SetAttribute définit la nouvelle valeur du style d'attribut. Alors tandis que i == 0 style = 'width: 100px;' while i == 1 style = 'hauteur: 80px;'

parce que vous venez de surcharger la valeur. Si vous voulez conserver la fonction SetAttribute dans votre code. Vous devez d'abord concaténer toutes les valeurs, puis utiliser l'attribut set

Answer 2

Dans les DOM. L'attribut style n'est pas une chaîne. C'est un objet. Ce qui signifie que vous devez faire ceci:

element.style.setProperty(a,b); 

Cependant, les anciennes versions d'IE ne prend pas en charge setProperty pour les objets de style. Ainsi, même si ce qui précède est techniquement la façon dont les normes en conformité de le faire, la méthode croisée borwser garantie qui fonctionne est:

element.style[a] = b; 

Notez que pour tous les cas où vous pensez que vous avez besoin setProperty ou setAttribute, la syntaxe object[x] = y fonctionnera également et dans le cas des styles est toujours rétrocompatible (pour ne pas mentionner nécessite moins de frappe).