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

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

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

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

button.style = 'float: right;';

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

ОТВЕТЫ

Ответ 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. Например, если ваш документ содержит встроенную графику SVG, которую нужно манипулировать с помощью javascript, вам нужно использовать setAttribute для этого.

Ответ 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.

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

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

Ответ 5

item = document.createElement("span");
item.setAttribute("style", "visibility : hidden;");
document.getElementById(parent).appendChild(item);

работает в Firefox, а не в IE. IE делает <span style="">, Firefox делает <span style="visibility : hidden;">.

Ответ 6

Он работает в IE. Просто попробовал.

  • Метод передается имя стиля и значение
  • Затем метод проверяет, есть ли какие-либо стили Если атрибут стилей не существует, то метод просто устанавливает стиль и останавливает
  • Если атрибут стиля существует, все стили в атрибуте разделяются на массив
  • Массив итерации, и все применимые определения стиля обновляются с новым значением
  • Атрибут стиля затем удаляется из элемента
  • Атрибут стиля добавляется обратно к элементу с его значениями, установленными для новой информации собранные из массива

Ответ 7

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

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

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