setAttribute 不适用于 IE 上的“样式”属性答案

【问题标题】：setAttribute is not working for 'style' attribute on IEsetAttribute 不适用于 IE 上的“样式”属性
【发布时间】：2019-11-09 06:07:34
【问题描述】：

我正在将一段为 Firefox 编写的 JS 代码移植到 Internet Explorer 中。我遇到了使用在 Firefox 上工作的 setAttribute 方法更改元素样式的问题。

button.setAttribute('style', 'float: right;');

我尝试设置按钮的样式成员，它也不起作用。这是设置onclick 事件处理程序时的解决方案。

button.style = 'float: right;';

首先我想知道上述问题的解决方案和
其次，浏览器之间的这些差异是否有维护列表？

【问题讨论】：

不是您问题的答案，但这样的差异是使用 JQuery、Prototype、MooTools 或 Dojo 等框架的最大“优点”点。 95-99% 不需要移植 JS。
似乎这在某个时候在 IE 中被破坏了。你应该可以使用 button.setAttribute('style', '') 因为这个方法只负责设置属性值。 button.style 是一个对象的事实只是设置相同属性的另一种方式。截至此评论，它似乎在 IE11 中工作。

标签： javascript html internet-explorer

【解决方案1】：

因为样式本身就是一个对象。你想要的是：

button.style.setAttribute('cssFloat','right');

但 IE 不支持样式对象的 setAttribute。所以使用完全支持的跨浏览器：

button.style.cssFloat = 'right';

作为参考，我总是去 www.quirksmode.org 。具体来说：http://www.quirksmode.org/compatibility.html。点击所有与 DOM 相关的东西。

最后，要设置多个属性，我通常使用类似：

function setStyle(el,spec) {
    for (var n in spec) {
        el.style[n] = spec[n];
    }
}

用法：

setStyle(button,{
    cssFloat : 'right',
    border : '2px solid black'
});

注意：object.attribute = 'value' 虽然适用于所有浏览器，但可能并不总是适用于非 HTML DOM 对象。例如，如果您的文档包含需要使用 javascript 操作的嵌入式 SVG 图形，则需要使用 setAttribute 来执行此操作。

【讨论】：

“因为样式本身就是一个对象”只是故事的一半，“button.style.setAttribute”会抛出错误，因为样式对象没有 setAttribute 方法。
button.style.float = 'right' 也会中断。没有 float 属性，因为 float 是 JavaScript 中的保留关键字。
不，不是。 style 属性上没有 setAttribute 方法！
@MikeCheel：在我写这个答案时，这通常不会起作用。也许它现在有效，但我对此表示怀疑。在 javascript 中，z-index 的正确名称是 zIndex。对于每个包含 - 的 css 属性，camelCase 中都有一个等效的样式属性。所以zIndex、backgroundImage、fontSize等等。
@MikeCheel：这还不是全部。另请注意，style 属性没有float 属性，因此您不能使用style.float = 'right'。相反，它有cssFloat。您需要参考 w3c 规范或 MDN 文档或 MSDN 文档以获取正确的名称。

【解决方案2】：

你需要使用cssText

 button.style.cssText = 'float: right;';

【讨论】：

【解决方案3】：

getAttribute 和 setAttribute 在 Internet Explorer 中已损坏。

你想要达到的正确语法是：

button.style.cssFloat = 'right';

问题的正确解决方案更有可能是：

button.className = 'a class that matches a pre-written CSS rule-set';

【讨论】：

【解决方案4】：

我注意到 setAttribute 仅在属性不存在时才在 IE 中起作用。所以先用remove属性，再用set属性。

尚未对此进行错误测试，但从概念上讲，我认为这会起作用：

注意 - 这是为了存在于具有名为“元素”的属性的对象中。

//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(";;", ";"))
}

【讨论】：

【解决方案5】：

另一种改变样式属性的有用方法是使用方括号来访问该属性。这对于访问属性很有用，因为它们的名称如果正常表达会产生语法错误。在 JavaScript 中，完全允许使用数值、数字首字母和符号以及空格作为字符的属性，但是您必须使用方括号的方式来访问属性。

node.style.z-index = 50;//Firefox says error, invalid assignment left hand side.

node.style["z-index"] = "50";//Works without error

【讨论】：

【解决方案6】：

它确实在 IE 中工作。刚试了一下。

该方法被传递了一个样式名称和一个值
然后该方法检查是否有任何样式如果不存在样式属性，则该方法只需设置样式并停止
如果样式属性存在，则将该属性中的所有样式拆分为一个数组
数组被迭代，所有适用的样式定义都更新为新值
然后从元素中删除样式属性
样式属性被添加回元素，其值设置为新信息从数组中收集

【讨论】：