0

HTML

<menu class="menu">
    <div class="overlay"></div><!-- overlay нуждается в style -->
    <nav class="nav-bar">
        <button class="mn-btn"></button>
    </nav>
    <ul class="item-list">
        <li><a href="#">Services</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Services</a></li>
    </ul>
</menu>

JS

var overlay = document.querySelector('.overlay');

window.addEventListener('resize', resize);

    function resize(){
        var radius = Math.sqrt(Math.pow(window.innerHeight, 2) + Math.pow(window.innerWidth, 2)),
            diameter = radius * 2;

        overlay.style.width = diameter;
        overlay.style.height = diameter;

        overlay.style.marginTop = -radius;
        overlay.style.marginLeft = -radius;
    }

    resize();

Мой overlay, это часть анимации, который должен изменять ширину и высоту (css) постоянно используя формулу, но у меня что-то опять не работает. Ничего не происходит, в консоли ошибок нет. Если в консоль написать resize(); выведет "undefined". Что не так со скриптом?

1
  • 2
    Не указаны единицы измерения. Если пиксели, то нужно писать overlay.style.width = diameter + 'px';, и так далее. А undefined выводится потому что функция ничего не возвращает - точнее говоря, она возвращает ничего :]
    – yar85
    3 апр 2019 в 16:52

1 ответ 1

0

Я понятия не имею почему style не устанавливался, но решил установить инлайн стили через setAttribute. Буду признателен, если расскажите, почему так работает, а так как наверху нет. Вот код JS:

var overlay = document.querySelector('.overlay');

window.addEventListener('resize', resize);

    function resize(){
        var radius = Math.sqrt(Math.pow(window.innerHeight, 2) + Math.pow(window.innerWidth, 2)).toFixed(0);
            var diameter = radius * 2;

        console.log(radius + ' ' + diameter)

        overlay.setAttribute('style', 'width: ' + diameter + 'px; ' + 'height: ' + diameter + 'px; ' +
                             'margin-top: ' + -radius + 'px; ' + 'margin-left: ' + -radius + 'px;');
    }

    resize();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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