Как изменить отображение div с помощью javascript

У меня есть div следующим образом:

<div id="div1" style="display:none">

Чтобы сделать его видимым снова, я безуспешно пытался:

document.getElementById('div1').style.display = ''

Как изменить стиль отображения div так, чтобы он снова отображался?

EDIT:, очевидно, что-то еще не так. это то, что я на самом деле делаю:

<script type="text/javascript">
    flagprofile = <?php print 1 ?>;
    if(flagprofile == 1){ document.getElementById('theid').style.display = 'block';  } else { document.getElementById('theid2').style.display = 'block'; }
</script>
<div id="theid" style="display:none">This is div 1</div>
<div id="theid2" style="display:none">This is div 2</div>

Я ожидаю, что первый появится, но это не так. Что не так?

Ответы

Ответ 1

Измените стиль display на block вместо '':

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

Обратите внимание, что вам нужно быть осторожным, чтобы восстановить исходное значение display. Если вы установите для элемента a значение display: block, оно будет сильно отличаться от ожидаемого. Вам нужно будет установить его на display: inline вместо этого, сделав очевидное изменение вышеприведенного кода.

Изменить, с вашим редактированием проблема становится ясной: элементы не существуют при запуске вашего Javascript. Подождите, пока все не загрузится до поиска элементов:

<script type="text/javascript">
window.onload = function() {
    var flagprofile = <?php print 1 ?>;
    if(flagprofile == 1){
        document.getElementById('theid').style.display = 'block';
    } else {
        document.getElementById('theid2').style.display = 'block';
    }
};
</script>

Ответ 2

Вы установили display в пустую строку, которая является недопустимой css, вместо этого попробуйте среди других:

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

или

document.getElementById('div1').style.display = 'inline-block';

Ответ 3

Это рабочий пример: Надеюсь, поможет! Майкл, Южная Африка

    function CountryChange() {
    	
    	if (document.getElementById("statebox").style.display == "block") 
    	{
    		document.getElementById('statebox').style.display = 'none';
    		document.getElementById('statebox').style.visibility = 'none';
    	}
    	else 
    	{
    		document.getElementById('statebox').style.display = 'block';
    		document.getElementById('statebox').style.visibility = 'visible';
    	}
        
    }

    <!-- BOX to switch on/off -->
    <div class="control-group" id="statebox" name="statebox" style="display: none">
         <label class="control-label">Bla Bla Bla...</label>
    </div>


    <!-- Pic to click -->

    <img onclick="javascript:CountryChange()" src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" name="picpincountry"/>

Ответ 4

Вы можете сделать:

document.getElementById('div1').style.display = 'block'

Ответ 5

Работает для меня... вы уверены, что в вашей таблице стилей нет ничего?

http://jsfiddle.net/minitech/YL8tq/

(Прокомментируйте JavaScript для тестирования без)

Ответ 6

Можете ли вы проверить, что flagprofile установлен в 1? Попробуйте сделать alert(flagprofile); и посмотреть, действительно ли это установлено. Если нет, вы можете попробовать var flagprofile = 1;.

Ответ 7

var uname=document.getElementById("urname").value;
    var passwrd=document.getElementById("passwd").value;

    if(uname=="john" && passwrd=="123"){

        document.getElementById("form2").style.display='none';

        document.getElementById("form1").style.display='block';

    }
    else{
        alert("Wrong username and pass");
    }

}

Ответ 8

По какой-то причине мне пришлось сделать следующее: чтобы получить эту работу.

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

document.getElementById('theid').style.visibility = 'visible';

После того, как я установил первый, он все еще был скрыт для меня. Как только я осмотрел DOM в F12, я заметил, что несмотря на display: block, visibility по-прежнему установлен на hidden.

Я также должен отметить, что я использую jQuery/jQueryUI для тех же элементов.

Надеюсь, это поможет кому-то.