2013-12-03 3 views
2

Хотя кодирования HTML5 страницы (PHP включен) Я заметил, что createElement() перестает работать, когда доктайп переключается на html5Поддерживается ли createElement() в html5?

<!DOCTYPE html> 

код является довольно стандартным создание элемента с помощью Javascript:

function Rhit(){ 
     var Hit=document.createElement('div'); 
     if(Hit){ 
      alert('Hit assigned.'); 
      Hit.setAttribute('id','Hits'); 
      if(document.body.appendChild(Hit)){ 
       alert('Hit transferred to body; setting styles.'); 
       Hit.style.width='400'; 
       Hit.style.height='400'; 
       Hit.style.position='absolute'; 
       Hit.style.right='0'; 
       Hit.style.top='0'; 
       Hit.style.backgroundColor='#777777'; 
      } 
     } 
     else{ 
      alert('Create Element Error, please debug.'); 
     } 

    } 

(Я немного отлаживал его под типом html5 doc ...) Всплывающие предупреждения, но теги div не тянутся под типом html5. (Работает нормально с обычным режимом html super sandbox)

Я что-то упустил?

(Кроме того, весь код отображается в источнике браузера.) Кажется, что код обрабатывается, но не нарисован?

EDIT: Здесь представлена ​​полная демоверсия. В то же время я добавил эти комментарии в:

<html> <!--if !html5 document draws.--> 
<head> 
<script> 
    function proc(){ 
     var foo=document.createElement('div'); 

     //Test foo creation. 
     if(foo){ 
      alert('Hit assigned.'); 
      foo.setAttribute('id','Hits'); 

      //test foo location assignment. 
      if(document.body.appendChild(foo)){ 

       alert('Hit transferred to body; setting styles.'); 

       //Set all other stuff. 
       foo.style.width='400'; 
       foo.style.height='400'; 
       foo.style.position='absolute'; 
       foo.style.right='0'; 
       foo.style.top='0'; 
       foo.style.backgroundColor='#777777'; 
      } 
     } 
     //If failed, all is lost. 
     else{ 
      alert('Create Element Error, please debug.'); 
     } 

    } 
</script> 
</head> 
<title></title> 
<body> 
    <script> 
    proc(); //Run function. 
    document.write('Javascript Running...'); 
    //Failsafe (for IDE's who don't care if your eyes hurt and insist 
    //that java has an error "somewhere".) 
    </script> 
</body> 

+0

'id' - свойство, а не атрибут, поэтому' Hit.id = 'Hits'; ' –

+0

HTML5 наиболее определенно поддерживает' createElement() '. Должно быть, что-то еще не так с вашим тестом. –

+1

@Jack в HTML-стороне жизни это атрибут, сопоставленный с свойством элемента. – rlemon

ответ

7

Ваша высота и ширина определяются неправильно и поэтому (IIRC), которые назначены 0.

Эти правила стиля CSS требуют, чтобы значения были процентами или пикселями. Итак:

Hit.style.width = '400px'; 
Hit.style.height = '400px'; 

должен дать элементу некоторые размеры, и пусть это будет видно.

+0

Спасибо, что сделал! –

Смежные вопросы