setAttribute не работает для атрибута 'style' в IE

Question

Я портирую часть кода JS, написанного для Firefox, в Internet Explorer. Я столкнулся с проблемой изменения стиля элемента с помощью метода setAttribute, который работал в Firefox.

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

Я попытался установить элемент стиля кнопки, но это тоже не сработало. Это было решением в случае установки onclick обработчика событий.

button.style = 'float: right;';

Сначала я хочу узнать решение вышеуказанной проблемы и
Во-вторых, есть ли поддерживаемые списки для этих различий между браузерами?

Answer 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', хотя работает во всех браузерах, не всегда может работать с DOM-объектами, отличными от HTML. Например, если ваш документ содержит встроенную графику SVG, которой вам нужно манипулировать с помощью javascript, вам нужно использовать setAttribute, чтобы сделать это.

Answer 2

Вам нужно использовать cssText

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

Answer 3

getAttribute и setAttribute не работают в Internet Explorer.

Правильный синтаксис для того, что вы пытаетесь достичь:

button.style.cssFloat = 'right';

Правильное решение проблемы, скорее всего, будет:

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

Answer 4

Я заметил, что setAttribute работает в IE только тогда, когда атрибут еще не существует. Поэтому используйте атрибут удаления, а затем используйте атрибут set.

Не проверял это на ошибки, но концептуально я думаю, что это будет работать:

ПРИМЕЧАНИЕ - это было написано, чтобы существовать внутри объекта, у которого было свойство, называемое '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(";;", ";"))
}

Answer 5

Это работает в IE. Только что попробовал.

1. Методу передается имя стиля и значение
2. Затем метод проверяет, есть ли стили Если атрибут стилей не существует, метод просто устанавливает стиль и останавливается
3. Если атрибут стиля существует, все стили в атрибуте разделяются на массив
4. Массив повторяется, и все применимые определения стилей обновляются новым значением
5. Атрибут style затем удаляется из элемента
6. Атрибут style добавляется обратно в элемент со значениями, установленными для новой информации собрано из массива

Answer 6

Еще один полезный способ изменить свойство стиля - использовать квадратные скобки для доступа к свойству. Это полезно для доступа к свойствам, которые из-за их имени могут вызвать синтаксическую ошибку, если выражены нормально. В Java вполне допустимо иметь свойства с числовыми значениями, первыми цифровыми буквами и символами и пробелами в качестве символов, но тогда вы должны использовать способ доступа к свойствам в квадратных скобках.

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

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