Пустой элемент JavaScript с отображением: нет

Question

Я создал страницу, где element1.style.display='none' по умолчанию.Теперь у меня есть другой элемент, element2, который при нажатии отображает element1.Но при попытке установить element1 для функции, которая устанавливает element1.style.display="block", я получаю сообщение об ошибке, говорящее, что element1 равно нулю.Я понимаю, что это потому, что display=none по умолчанию.

Как я могу решить эту проблему?это использует javascript, а не jquery.

var hash = location.hash; 
alert(hash); 

function init() { 
    if( hash == '#menu-a' || hash == '' ) { 
        document.getElementById('menu-a').style.display = 'block';
    } 
    else if( hash == '#menu-b' ) { 
        document.getElementById('menu-b').style.display = 'block'; 
    }
    else { 
        document.getElementById('menu-c').style.display = 'block'; 
    } 
} 

window.onload=init; 

Answer 1

Я понимаю, что это потому, что дисплей = нет по умолчанию

Нет. Это потому, что ничего не было присвоено переменной.

Я предполагаю, что вы ожидаете, что элемент с id="element1" автоматически создаст переменную JavaScript с именем element1 - это не должно быть.

document.getElementById('element1').style.display = 'block';

Answer 2

Полагаю, вы меняете стиль этого элемента еще до того, как этот элемент будет сгенерирован на вашей html-странице.Когда вы пытаетесь получить доступ к какому-либо элементу на веб-странице, если этот элемент недоступен на странице в этот момент времени, он возвращает Null Я предлагаю запустить эту часть javascript после полной загрузки этих элементов, используя такие атрибуты, как, onclick, onload и т. Д ...

Answer 3

У меня фактически была похожая проблема: не все браузеры обрабатывают элементы с display:none (или, по крайней мере, их дочерние элементы) одинаково.У меня есть несколько объектов SVG, помещенных в два DIV, и я хочу показать один или другой.Во время инициализации я делаю некоторые манипуляции с элементами SVG (меняю некоторые текстовые элементы внутри SVG).Это отлично работало с Firefox, но не с Opera, Chrome и IE.В этих браузерах элементы, которые были внутри div с display:none, дали нулевой результат при попытке получить их с document.getElementById(myID).Первым обходным решением было установить свойство display:none только после инициализации (это сработало), но когда я захотел показать их снова, вся инициализация была потеряна (все текстовые метки были по умолчанию).Я думаю, это доказывает, что содержимое DIV с display:none каким-то образом очищается от DOM, а не просто скрыто.Я также попытался использовать visibility:hidden вместо display:none, но это сильно испортило макет страницы.Единственное решение, которое, похоже, работает во всех браузерах, - это (пока что) разместить DIV, который я хочу скрыть, в «космическом пространстве», например , здесь предлагается ...

position: absolute;
top: -9999px;
left: -9999px;

Answer 4

Вы должны сделать display:block вскоре после инициализации element, а затем вернуть его к display:none сразу после инициализации.

Answer 5

Есть ли шанс, что javascript сработает до того, как dom будет готов? element1 существует в дереве dom в тот момент, когда вы хотите получить к нему доступ?

Answer 6

Если скрытый элемент всегда в одном и том же порядке, вы можете попытаться получить к нему доступ с помощью getElementsByTagName ("") [arrayindex].