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