Форум

Mixeyka · #1 (**permalink**) 08.06.2016, 15:20

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

Выяснилось, что в скрипте не могу получить доступ к тегу body и соответственно к свойству document.body.clientHeight, если сверху кода наличествует, как положено <!DOCTYPE html>.

Нужную функцию вызываю из: <body onload="my_function();">

Как только убираю <!DOCTYPE html>, всё сразу работает нормально. Почему так?

Botik21 · #2 (**permalink**) 08.06.2016, 16:19

Пример кода где?
Используйте

window.innerHeight

Mixeyka · #3 (**permalink**) 08.06.2016, 17:33

<!DOCTYPE html>

<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>код с ошибкой</title>
        <script type="text/javascript">
            function подогнатьРазмерИзображения() {
                document.getElementById("изображение").style.height = (document.body.clientHeight - 100) * 0.9;
            }

        </script>
    </head>

    <body onload="подогнатьРазмерИзображения();" onresize="подогнатьРазмерИзображения();">

        <div style="margin-top: 100px; text-align: center;">
            <img id="изображение" src="изображение.png" 
                 alt="какое то изображение" style="cursor:pointer;">
        </div>

    </body>
</html>

Mixeyka · #4 (**permalink**) 08.06.2016, 21:16

Неужели вопрос такой сложный?

рони · #5 (**permalink**) 08.06.2016, 21:25

Mixeyka,
ширина-высота-страницы-с-учётом-прокрутки

Mixeyka · #6 (**permalink**) 08.06.2016, 22:39

Сообщение от рони

ширина-высота-страницы-с-учётом-прокрутки

Да это не к вопросу совсем.
К body то доступа нет, если по правилам оформлять(в представленной мной программе).

Coriolan161 · #7 (**permalink**) 09.06.2016, 00:04

Mixeyka,
Реально сделай через window.innerHeight
Там ещё прикол есть: когда задаешь style.height = то надо приписывать ещё юнит.
Короче, так всё работает и без всякой ереси вроде 'О! удалил доктайп и работает нормально!'

Ещё: может у тебя не работает потому, что картинки не такие как хочет браузер. Я ему дал картинку и он сразу всё хорошо показал. Он любит девочек.

Ладно, шучу.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>код без ошибки</title>
        <script>
            function imageResize() {
                document.getElementById("#image").style.height = (window.innerHeight - 100) * 0.9 + 'px';
                console.log((document.body.clientHeight - 100) * 0.9 + 'px');
                console.log((window.innerHeight - 100) * 0.9 + 'px');
            }
        </script>
    </head>

    <body onload="imageResize();" onresize="imageResize();">
        <div style="margin-top: 100px; text-align: center;">
            <img id="#image" src="J8B7k96FIyI.jpg" alt="голая баба" style="cursor:pointer;">
        </div>
    </body>
</html>

Mixeyka · #8 (**permalink**) 09.06.2016, 08:11

Coriolan161
Спасибо. Навёл на мысли.
Пока складывается впечатление, что язык чрезмерно загадочен.

Проверил по логу, что доступ к body всё-таки есть. Однако.

((document.body.clientHeight - 100) * 0.9) - не работает.
((document.body.clientHeight - 100) * 0.9) + "px" - не работает.
((window.innerHeight - 100) * 0.9) - тоже не работает.
(window.innerHeight - 100) * 0.9 + 'px' - Представленный тобой способ похоже единственный.

Ну это же херов бред!!! Не очень то приятное впечатление от знакомства с языком, честно говоря.

Coriolan161 · #9 (**permalink**) 09.06.2016, 22:35

Mixeyka,
c clientHeight тоже работает. Только надо не на body (в некоторых источниках 'бодя'), а на html.

document.documentElement.clientHeight // ....

И обязательно пиксели указывать.

Форум

Справочник

Discord чат

Курсы javascript