setAttribute ne fonctionne pas pour l'attribut 'style' sur IE
Je porte un morceau de code JS écrit pour Firefox dans Internet Explorer. J'ai fait face à un problème de changement de style d'un élément en utilisant la méthode setAttribute qui fonctionnait sur Firefox.
button.setAttribute('style', 'float: right;');
J'ai essayé de définir le membre de style du bouton et cela n'a pas fonctionné non plus. C'était la solution en cas de définition du gestionnaire d'événements onclick.
button.style = 'float: right;';
Je veux d'abord connaître la solution au problème ci-dessus et
Deuxièmement, existe-t-il des listes maintenues pour ces différences entre les navigateurs ?
5 réponses
Parce que le style lui-même est un objet. Ce que vous voulez est:
button.style.setAttribute('cssFloat','right');
Mais IE ne prend pas en charge setAttribute pour les objets de style. Donc, utilisez le multi-navigateur entièrement pris en charge:
button.style.cssFloat = 'right';
Comme référence, je vais toujours à www.quirksmode.org . Plus précisément: http://www.quirksmode.org/compatibility.html . Cliquez sur tous les trucs liés DOM.
Et enfin, pour définir plusieurs attributs, j'utilise habituellement quelque chose comme:
function setStyle(el,spec) {
for (var n in spec) {
el.style[n] = spec[n];
}
}
Utilisation:
setStyle(button,{
cssFloat : 'right',
border : '2px solid black'
});
Remarque: object.attribute = 'value' bien que fonctionne dans tous les navigateurs peuvent ne pas toujours fonctionner pour les objets DOM non-HTML. Par exemple, si votre document contient des dessins SVG que vous devez manipuler avec javascript, vous devez utiliser setAttribute pour le faire.
getAttribute et setAttribute sont cassés dans Internet Explorer.
La syntaxe correcte pour ce que vous essayez de réaliser est:
button.style.cssFloat = 'right';
La solution correcte au problème est plus susceptible d'être:
button.className = 'a class that matches a pre-written CSS rule-set';
, Vous devez utiliser cssText
button.style.cssText = 'float: right;';
J'ai remarqué que setAttribute ne fonctionne dans IE que lorsque l'attribut n'existe pas déjà. Par conséquent, utilisez remove attribute, puis utilisez set attribute.
N'ont pas testé cela pour les bugs, mais conceptuellement je pense que cela fonctionnera:
NOTE - ceci a été écrit pour exister à l'intérieur de l'objet qui avait la propriété appelée 'element'.
//Set Property
this.setProperty = function (a, b) {
var c = this.element.getAttribute("style");
var d;
if (!c) {
this.element.setAttribute("style", a + ":" + b);
return;
} else {
d = c.split(";")
}
for (var e = 0; e < d.length; e++) {
var f = d[e].split(":");
if (f[0].toLowerCase().replace(/^\s+|\s+$/g, "").indexOf(a.toLowerCase().replace(/^\s+|\s+$/g, "")) == 0) {
d[e] = a + ":" + b
}
}
d[d.length] = a + ":" + b;
this.element.setAttribute("style", d.join(";"))
}
//Remove Property
this.removeProperty = function (a) {
var b = this.element.getAttribute("style");
var c;
if (!b) {
return
} else {
c = b.split(";")
}
for (var d = 0; d < c.length; d++) {
var e = c[d].split(":");
if (e[0].toLowerCase().replace(/^\s+|\s+$/g, "").indexOf(a.toLowerCase().replace(/^\s+|\s+$/g, "")) == 0) {
c[d] = ""
}
}
this.element.removeAttribute("style");
this.element.setAttribute("style", c.join(";").replace(";;", ";"))
}
Cela fonctionne dans IE. Juste essayé.
- la méthode reçoit un nom de style et une valeur
- la méthode vérifie ensuite s'il existe des styles Si aucun attribut styles n'existe, la méthode définit simplement le style et arrête
- si un attribut de style existe, tous les styles de l'attribut sont divisés en un tableau
- le tableau est itéré et toutes les définitions de style applicables sont mises à jour avec la nouvelle valeur
- l'attribut style est alors supprimé de l'élément
- L'attribut style est ajouté à l'élément avec ses valeurs à la nouvelle info rassemblé à partir du tableau