Странные проблемы при настройке стиля с использованием JavaScript при использовании DOCTYPE - PullRequest
Новая
       13

Странные проблемы при настройке стиля с использованием JavaScript при использовании DOCTYPE

3 голосов
/ 27 октября 2010

Я пытаюсь добавить <div> с помощью JavaScript, а затем изменить его атрибуты width / height / top / left. Но когда я использую XHTML 1 Transitional doctype, он перестает работать.

Вот как я создаю <div>: 

var div=document.createElement("div");
document.body.appendChild(div);
div.innerHTML='<div id="myID" style="z-index:9998;border: 1px solid #000000;
border-radius:3px;position: absolute; display: block;top:-10000;left:-10000; 
width:400; height:400;"></div>';

Итак, изначально myDiv не виден пользователю, так как его левый и верхний края находятся вне экрана

Затем при некоторых действиях клика я делаю следующее: 

var myDiv=document.getElementById("myID");
myDiv.style.top=200;
myDiv.style.left=200;

Это прекрасно работает, если я не помещаю в HTML тип документа. Как только я ставлю doctype, он перестает работать. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

При использовании типа документа он перестает принимать значения top / left / width / height. Но если я установлю значения ширины / высоты / верхнего / левого с единицами измерения (то есть, px), то все будет хорошо. 

myDiv.style.top="200px";
myDiv.style.left="200px";

Итак, каково влияние doctype на выполнение JavaScript при изменении стиля (или, может быть, других вещей)?

Ответы [ 2 ]

4 голосов
/ 27 октября 2010

Использование необработанных чисел технически недопустимо, даже если браузер позволяет вам избежать неприятностей с ним, когда вы не используете тип документа (браузеры делают много прикольных вещей, когда вы не используете тип документа).

Свойства стиля действительно похожи на свойства CSS, строки с единицами на них. Таким образом, «200px» правильно, 200 неправильно. Свойства (например, left) могут быть длины , например "200px" или "10em", или процентов (или auto или inherit). (Эти ссылки на спецификацию CSS 2.1.)

Вам также необходимо включить единицы в вашу строку при создании myID div: 

div.innerHTML = '<div id="myID" style="z-index:9998; ' +
    'border: 1px solid #000000; ' +
    'border-radius:3px;' +
    'position: absolute;' +
    'display: block;' +
    'top:-10000px;' +     // here
    'left:-10000px;' +    // here
    'width:400px;' +      // here
    'height:400px;"' +    // and here
    '></div>';
1 голос
/ 27 октября 2010

Использование DOCTYPE сообщает браузеру, что вы используете определенный стандарт (в вашем случае, XHTML 1.0) - браузер затем использует точный режим рендеринга (вместо режима причуд , что он будетиспользуйте без DOCTYPE).

Это означает, что он будет интерпретировать ваш код гораздо более строго - размеры всегда должны иметь единицу измерения (200px, 1.2em и т. д.).Просто число не имеет смысла, поэтому браузер будет игнорировать эти значения, когда не в режиме причуд.

...