2014-01-19 4 views
0

Мой скрипт не запускается или document.getElementById ("toMove"); похоже, не улавливает элемент. Его базовый javascript, но я не могу понять, почему он не работает.Изменить элемент Div с помощью javascript

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>test</title> 
    <style> 
    #toMove 
    { 
     background-color:lightblue; 
     position:absolute; 
    } 
    </style> 
     <script> 
     var elem = document.getElementById("toMove"); 
     elem.style.margin = "600px"; 
    </script> 
</head> 
    <body> 
<div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div> 
    </body> 

Благодаря

+0

Заметил '

+0

Да, спасибо. Это была ошибка копирования. Основная проблема заключалась в том, что элемент еще не был в DOM, как указано ниже. – djcj

ответ

0

Там есть несколько причин, почему это не работает

  1. Вы должны закрыть <head> тег еще правильно
  2. Точка, в которой ваш скрипт работает, элемент с идентификатором toMove не существуют в DOM (Document Object Model)

Решение номер 1 должно быть достаточно простым, просто измените </head на </head>. Чтобы решить номер 2, вам необходимо убедиться, что сценарий срабатывает после того, как элемент с id toMove существует в DOM. Вы можете сделать это, подключив свой сценарий к огню, когда окно закончит загрузку. Приведенный ниже код устанавливает функцию, которая срабатывает при завершении окна

window.onload = function(){ 
    var elem = document.getElementById("toMove"); 
    elem.style.margin = "600px"; 
} 
+0

даже копирует скрипт после того, как div сделает трюк. – user1357872

+0

@ user1357872 да, это тоже сработает –

1

Закройте тег правильно. Проблема в том, что когда ваши скрипты выполняют ваш элемент toMove не существует в DOM

Оберните свой код в window.onload. Функция выполняет JavaScript при завершении загрузки страницы.

window.onload = function(){ 
    var elem = document.getElementById("toMove"); 
    elem.style.margin = "600px"; 
} 

ИЛИ, просто написать свой сценарий в после того как вы HTML declartion

1

Проблема заключается в том, что этот сценарий должен работать, как только DOM готов (все элементы отображаются в браузере) Заверните сценарий, как описано здесь:

pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Или, если вы используете JQuery с

$('document').ready(function(){});

0

Необходимо правильно закрыть головной тэг.

</head> 

А также код Сатпала.

+0

Это скорее комментарий к ответу Сатпала –

+0

@ RokoC.Buljan, у него сейчас недостаточно репутации, надеюсь, он туда доберется – Satpal

+0

@ RokoC.Buljan, его 50 – Satpal

0

Это будет работать.

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <title>test</title> 
     <style> 
     #toMove 
     { 
      background-color:lightblue; 
      position:absolute; 
     } 
     </style> 

    </head 
     <body> 
    <div id="toMove" style="margin:200px; font-size:26px;"> Hello World</div> 
     </body> 
     <script> 
      var elem = document.getElementById("toMove"); 
       elem.style.margin = "500px"; 
     </script> 
     </html> 
Смежные вопросы