3

Подскажите, что делаю не так. Хочу показать элемент, который скрыт.

<div class="admincontent3" id="admincontent3">
  Hello
</div>

JavaScript:

function showAddedToBasket() {
  var added_item_button = document.getElementById('admincontent3');
  var displaySetting = added_item_button.style.display;

  if (displaySetting == 'none') {
    added_item_button.style.display = 'block';
  }
}

Twig:

{% if added_to_basket == true %}
    <script type="text/javascript">
        showAddedToBasket();
    </script>
{% endif %}

CSS:

.admincontent3{
    display: none;
    color:white;
    font-size: 2vw;
    margin-top: -50vw;
    -webkit-animation: seconds 1.0s forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1.5s;
    animation: seconds 1.0s forwards;
    animation-iteration-count: 1;
    animation-delay: 1.5s;
}
2
  • У вас display: none задан для класса, и не задан для id. А скриптом вы проверяете состояние display у id. Commented 28 нояб. 2017 в 4:36
  • @AndreyFedorov, только не у "id", а у Dom-элемента
    – vp_arth
    Commented 28 нояб. 2017 в 4:58

1 ответ 1

7

Вы проверяете стили, присущие конкретному элементу(свойство style), в то время как display был задан в css(в классе).


Получить актуальные стили, с учётом всех каскадных таблиц стилей(CSS) можно с помощью функции getComputedStyle

function action() {
  var added_item_button = document.getElementById('admincontent3');
  var actualDisplay = getComputedStyle(added_item_button).display;
  if (actualDisplay == 'none') {
    added_item_button.style.display = 'block';
  } else {
    added_item_button.innerText += '.';
  }
}
.admincontent3{
    display: none;
}
<div class="admincontent3" id="admincontent3">
    Hello
 </div>
 <hr>
 <button onclick=action()>Show</button>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.