Good day! There is such a piece of code:

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style=" "> <div class="modal-dialog modal-sm" id="search-filter-window"> <div class="modal-content text-center"> <h3 class="text-center">Фильтр поиска</h3> <form action="search-results.php" method="get"> <p class="text-center"><label for="link-to-group-field">Группа / паблик / встреча:</label></p> <input value="<?=urldecode($_GET['link'])?>" type="text" placeholder="https://vk.com/licey_pri_ulgtu" class="form-control" id="link-field" name="link"> <br> <p class="text-center"><label for="sex-selector">Кого ищем?</label></p> <select name="sex" id="sex-selector"> <option <?=$_GET['sex']==0?" selected":""?> value="0">Всех подряд</option> <option <?=$_GET['sex']==1?" selected":""?> value="1">Девушку</option> <option <?=$_GET['sex']==2?" selected":""?> value="2">Парня</option> </select> <br> <br> <p class="text-center"><label for="sex-selector">Имя и/или фамилия. Не знаем - оставляем пустым.</label></p> <input value="<?=urldecode($_GET['query'])?>" type="text" placeholder="Таня" class="form-control" id="query-field" name="query"> <br> <p class="text-center"><label for="left-age-limit-field">Знаем возраст? Не знаем - оставляем пустым.</label></p> <div class="age-select"> <div class="input-group"> <input value="<?=$_GET['age-from']?>" type="text" placeholder="От" class="form-control" size="2" id="age-from-field" name="age-from"> </div> <div class="input-group"> <input value="<?=$_GET['age-to']?>" type="text" placeholder="До" class="form-control" size="2" id="age-to-field" name="age-to"> </div> </div> <br> <?php if ($_GET['search-from'] != "friends") { echo "<button type=\"button\" onclick=\"modalBackdropHeightRefresh()\" class=\"btn btn-info btn-xs\" data-toggle=\"collapse\" data-target=\"#hide-me\">Доп. параметры поиска</button>"; echo "<br>"; echo "<div id=\"hide-me\" class=\"collapse\">"; $countries = $interaction->getCountriesList(); echo "<br>"; echo "<select name=\"country_id\" id=\"country_id\" style='width: 200px;'>"; echo "<option value=\"0\">Страна</option>"; foreach ($countries['response']['items'] as $country) echo "<option value=\"{$country['id']}\">{$country['title']}</option>"; echo "</select>"; echo "<br>"; echo "<br>"; echo "<select name=\"region_id\" id=\"region_id\" disabled=\"disabled\" style='width: 200px;'>"; echo "<option value=\"0\">Выберете страну</option>"; echo "</select>"; echo "<br>"; echo "<br>"; echo "<select name=\"city_id\" id=\"city_id\" disabled=\"disabled\" style='width: 200px;'>"; echo "<option value=\"0\">Выберете область</option>"; echo "</select>"; echo "</div>"; echo "<br>"; } ?> <input type="hidden" name="search-from" value="<?=$_GET['search-from'] ?>"> <input type="hidden" name="offset" value="<?=$_GET['offset'] ?>"> <input type="submit" class="btn btn-info btn-lg" id="search-from-group-submit" value="Обновить результаты"> </form> </div> </div>

From all this disgrace, I ask you to pay attention to the second line: <div class="modal-dialog modal-sm" id="search-filter-window">

The fact is that I have a modal window, inside of which there is a closed spoiler by default. When you open the window, the background is darkened, but if you open a spoiler in an open window, you need to change the height of the darkened area (on large screens you do not need it, but this is not about that now). To update the height there is a script:

 var clickCounter = 0; var defaultBackdropHeight = 0; var clientBrowserHeight = document.documentElement.clientHeight; function modalBackdropHeightRefresh() { clickCounter++; if (clickCounter % 2 == 0) { document.getElementsByClassName('modal-backdrop')[0].style.height = defaultBackdropHeight; } else { defaultBackdropHeight = document.getElementsByClassName('modal-backdrop')[0].style.height; var newHeight = parseInt(defaultBackdropHeight) + 180; document.getElementsByClassName('modal-backdrop')[0].style.height = newHeight + 'px'; } var fullFilterHeight = document.getElementById('search-filter-window').style.height; alert(fullFilterHeight); return false; }

The essence is simple, if the click on the spoiler is first (odd), then we update the height of the darkened area, if even - we set the one that was before the spoiler was unfolding (the height before the spoiler is unfolded is counted by the bootstrap). And so on. To do this beautifully and adaptively, you need to know the height of the modal window with the spoiler open. I try to do it (fullFilterHeight), but nothing comes back. If to deduce through alert - emptiness. Even if I want to display another parameter of this element, it is still empty. What is the problem?

  • id should not contain - . Try this: id="search_filter_window" - Amandi
  • @ Artem I hear it the first time. No, the result has not changed. - Ivan Blohin
  • @ Artem id can contain any characters except spaces - andreymal
  • 3
    Wrong) It is better to find the height like this: fullFilterHeight = document.getElementById('search-filter-window').offsetHeight; - Amandi
  • if getElementById "did not see" the element, you would have an error like "Cannot find property style of null". This element probably has no height in style. - Igor

1 answer 1

I strongly suspect that the thing is that you set the height for the class, and not for the element specifically. Through the style property you can read only those styles that are assigned to the element directly. To get the computed styles as a result of cascading and overlaying classes, there is a property getComputedStyle.