Форум

with-love-from-siberia · #1 (**permalink**) 26.09.2010, 07:03

Обнаружил интересную особенность в MSIE

Этот код не работает в MSIE и выдает сообщение Unknown runtime error в строке 3. Не имеет значения, во что будет установлено style.innerHTML. С другими браузерами (в наличии ФФ, Хром) проблем нет.

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.' + className + ' { display: none; }';
document.body.appendChild(style);

Нашел обходное решение -- работает во всех имеющихся браузерах.

var div = document.createElement('div');
div.className = className;
div.innerHTML = '&nbsp;\x3Cstyle type="text/css"\x3E.' + className + ' { display: none; }\x3C/style\x3E';
document.body.appendChild(div);

Полагаю, что изобрел велосипед. Поэтому задаюсь вопросом -- а есть ли другие решения, более элегантные?

рони · #2 (**permalink**) 26.09.2010, 08:12

посмотри тут

with-love-from-siberia · #3 (**permalink**) 26.09.2010, 09:20

Спасибо. Это действительно это более элегантное решение - "DOM через внешний JavaScript"

var style = document.createElement('style');
style.type = 'text/css';
var css = '.' + className + ' { display: none; }';
if ( style.styleSheet ) {
	style.styleSheet.cssText = css;
} else {
	if ( style.innerText == '' ) {
		style.innerText = css;
	} else {
		style.innerHTML = css;
	}
}
document.getElementsByTagName('head')[0].appendChild(style);

Эксперименты показали, что каждый браузер использует разные свойства
FF - innerHTML
IE - styleSheet.cssText
Chrome (SRWare Iron) - innerText

Octane · #4 (**permalink**) 26.09.2010, 14:31

Чем это элегантнее решение с кучей проверок?

function parse(html) {
    var node = document.createElement("div");
    node.innerHTML = html;
    return node.firstChild;
}

document.body.appendChild(parse("<style>…</style>"));

with-love-from-siberia · #5 (**permalink**) 26.09.2010, 21:46

Элегантность заключается в отсутствии лишнего элемента внутри тела документа. Я абсолютно с Вами согласен, что пример с оберткой лаконичен.

Кстати Ваш пример, хоть и похож на мой, не добавит новую стилевую таблицу в МСИЕ.

Octane · #6 (**permalink**) 26.09.2010, 22:34

Угу… фокус, как с инпутами, не удался.

Ну тогда можно обойтись вообще без создания элемента <style>

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Test</title>
<style></style>
<div>test</div>
<script>
var stylesheet = document.styleSheets[0];
if (stylesheet.insertRule) {
	stylesheet.insertRule("div{color:#f00}", stylesheet.cssRules.length);
} else {
	stylesheet.addRule("div", "color:#f00", -1);
}
</script>

with-love-from-siberia · #7 (**permalink**) 27.09.2010, 11:06

Сообщение от Octane

Ну тогда можно обойтись вообще без создания элемента <style>

Вы не поняли. Надо именно добавить тег. В МСИЕ innerHTML не работает для этого тега. А вот об addRule вместо insertRule, увы, не догадался. Спасибо.

Форум

Справочник

Discord чат

Курсы javascript