getElementById не видит элемент

Добрый день! Есть такой кусок кода:

<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>

Из всего этого безобразия я прошу обратить внимание на вторую строчку: <div class="modal-dialog modal-sm" id="search-filter-window">

Дело в том, что у меня есть модальное окно, внутри которого есть закрытый по умолчанию спойлер. При открытии окна задний фон затемняется, но если в открытом окне открыть спойлер, то высоту затемненной области нужно менять (на больших экранах не нужно, но сейчас не об этом). Для обновления высоты есть скрипт:

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;
}

Суть проста, если клик по спойлеру первый (нечетный), то мы обновляем высоту затемненной области, если четный - ставим ту, которая была до разворачивания спойлера (высоту до разворачивания спойлера считает бутсрап).И тд. Чтобы это делать красиво и адаптивно, нужно знать высоту модального окна с раскрытым спойлером. Я пытаюсь это сделать (fullFilterHeight), но в ответ ничего не приходит. Если выводить через alert - пустота. Даже если я захочу вывести другой параметр этого элемента - все равно пусто. В чем проблема?