преобразовать объект Javascript в элемент dom - PullRequest
2 голосов
/ 03 августа 2011

У меня была эта путаница с давних пор. Произошла ошибка, которая не может прочитать свойство null в Chrome Inspector.

После поиска и чтения я обнаружил, что свойство (например, стиль) может быть применено к элементу DOM, но если оно отображается как объект javascript, оно выдает вышеуказанную ошибку.

Итак, как мне это сделать?

<html>
    <head>
        <style>
            #test {background:black;width:30px;height:30px;}
        </style>
        <script>
            var a = document.getElementById('test');
            a.style.background = "#f00";
        </script>
    </head>
    <body>
            <div id="test">
            </div>
</body>
</html>

Когда я сделал предупреждение (typeof a); это дает как объект. Так как же вообще изменить свойства элементов ??

Ответы [ 3 ]

5 голосов
/ 03 августа 2011

Проблема в том, что #test не существует при выполнении скрипта. Сценарий выполняется сразу после загрузки страницы, и в тот момент, когда браузер выполняет сценарий, он не достиг <div id="text"></div>, поэтому document.getElementById('test') возвращает null.

null значения не имеют свойств, поэтому вызов: a.style.background... приводит к ошибке JavaScript. Если вы присоедините этот сценарий к body.onload, предоставленная функция обратного вызова будет выполняться после загрузки остальной части страницы:

document.body.onload = function(){
  var a = document.getElementById('test');
  if ( a ) //just a check to make sure that `a` was set so that it doesn't error again.
  {
    a.style.background = "#f00";
  }
};
3 голосов
/ 03 августа 2011

Ваш javascript запущен до завершения загрузки страницы.

Вам нужно поместить свой javascript в окно. Загрузить так:

window.onload = function()
{
  var a = document.getElementById('test');
  a.style.background = "#f00";
}
1 голос
/ 03 августа 2011

Вам нужно дождаться полной загрузки DOM, прежде чем вызывать этот скрипт, потому что когда вы вызываете код, элемент еще не создан.

http://jsfiddle.net/m5Qqs/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...