четверг, сентября 21, 2006

Нелогичность с class и className в IE

Стояла задача: динамически создать див определённого стиля с текстом и воткнуть его в другой. Так как вобщем-то javascript я изучал зная уже не один и даже не два языка программирования, то я написал код так как мне показалось логично. Ниже демонстрационный код того что получилось(дизайна как такого нет - это просто демка):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<title>IE JS CSS</title>
<style type="text/css">
.grayItalic {
font-style:Italic;
background-color:#CCCCCC;
}
</style>
<script type="text/javascript">
function insertCustDiv(ownerID,classname,text) {
var div=document.createElement('div');
div.setAttribute('class',classname);
div.appendChild(document.createTextNode(text));
document.getElementById(ownerID).appendChild(div);
}
</script>
</head>
<body>


<div style="background-color:#CCCCCC;width:250px;">
<form action=""><fieldset>
<legend>Вставка div'а с текстом</legend>
<input type="button" onclick="javascript: insertCustDiv('divToInsert','grayItalic','Just text');" value="Нажми чтобы вставить">
</fieldset></form>
</div>

<div style="background-color:#FFFF66;width:300px;" id="divToInsert">Вставка будет сюда</div>

</body>
</html>

Пример выводит форму с одной кнопкой и div куда будет производится вставка:



При нажатии на кнопку в Firefox'е и Опере вставляемый div имеет стиль заданный классом grayItalic, т.е. серый фон и наклонный шрифт:



IE же при вставке div'а игнорирует стиль и вставляет без учёта стиля:


В чём же дело? Я не зря упомянул, что javascript не первый мой язык и соответственно я написал код в привычном мне стиле:


function insertCustDiv(ownerID,classname,text) {
var div=document.createElement('div');
div.setAttribute('class',classname);
div.appendChild(document.createTextNode(text));
document.getElementById(ownerID).appendChild(div);
}

Вроде бы всё логично(особенно для тех кто привык работать с xml), но на самом деле в W3C DOM для указания class для элемента есть специальное свойство - className (которое судя по описанию как раз и устанавливает аттрибут class, но как известно IE не особо волнуют всякие там стандарты). Переписываем вот так:


function insertCustDiv(ownerID,classname,text) {
var div=document.createElement('div');
div.className = classname;
div.appendChild(document.createTextNode(text));
document.getElementById(ownerID).appendChild(div);
}


И всё работает в IE тоже.

Аналогично не работает установка аттрибута "for" (для элемента label), вместо этого надо использовать свойство "htmlFor". Сложнее обстоит дело со "style", может позже напишу об этом.