Блог

Главная - Вопросы по программированию - Настройки свойств элемента JS не работают с HTML 5

Настройки свойств элемента JS не работают с HTML 5

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть некоторый javascript, который настраивает скрытый div для автоматического предложения, и он отлично работает, когда для doctype установлено значение : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

 function editpartnumberInit() {
   /* Create Suggest Box */
                    suggestDiv=document.createElement("DIV");
                    suggestDiv.id="editpartnumbersuggestBox";
                    suggestDiv.className="suggest_results";
                    suggestDiv.style.visibility="hidden";
                    suggestDiv.style.width=400;
                    suggestDiv.style.zIndex="200";
                    document.body.appendChild(suggestDiv);
                    suggestDiv.style.position="absolute";
                    pos = suggestPos("editpartnumber", 400);
                    suggestDiv.style.top=pos[1];
                    suggestDiv.style.left=pos[0];
   /* Setup the event handler */
                    editpartnumberOldValue=document.getElementById("editpartnumber").value;
                    suggestAddTimer("editpartnumber", "editpartnumberOnchange()");
}

Однако, если я изменю doctype на <!DOCTYPE html> то, что происходит при инициализации, — это стиль.width, style.top, style.left не устанавливается, ошибок нет, даже когда я отлаживаю в Chrome и пытаюсь установить с консоли, он просто не устанавливается.

Результаты с doctype 4.01:

<div id="editpartnumbersuggestBox" class="suggest_results" style="visibility: hidden; width: 400px; z-index: 200; position: absolute; top: 321px; left: 421px;"></div>

Результаты с помощью простого документа HTML 5:

<div id="editpartnumbersuggestBox" class="suggest_results" style="visibility: hidden; z-index: 200; position: absolute;"></div>

Кто-нибудь знает, в чем здесь проблема?

Обновление: исправлено, спасибо!

 suggestDiv.style.width="400px";
pos = suggestPos("editpartnumber", 400);
suggestDiv.style.top=pos[1] "px";
suggestDiv.style.left=pos[0] "px";

Комментарии:

1. JS styles принимает только строки; измените ваши целые 200px числа, например. Вам необходимо установить единицу измерения

Ответ №1:

Я думаю, что проблема здесь : suggestDiv.style.width=400; . В HTML5 / CCS3 свойство width не может быть простым числом, оно должно иметь единицу.

Если вы измените его на suggestDiv.style.width='400px'; , он должен работать.

то же самое применимо и здесь:

 pos = suggestPos("editpartnumber", 400);
suggestDiv.style.top=pos[1];
suggestDiv.style.left=pos[0];

Вы должны быть уверены, что booth pos[1] и pos[0] включает «px» после каждого числа.

Метки: