Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.06.2016, 15:20
Новичок на форуме
Отправить личное сообщение для Mixeyka Посмотреть профиль Найти все сообщения от Mixeyka
 
Регистрация: 08.06.2016
Сообщений: 8

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

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

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

Как только убираю <!DOCTYPE html>, всё сразу работает нормально. Почему так?
Ответить с цитированием
  #2 (permalink)  
Старый 08.06.2016, 16:19
Аватар для Botik21
Аспирант
Отправить личное сообщение для Botik21 Посмотреть профиль Найти все сообщения от Botik21
 
Регистрация: 01.06.2016
Сообщений: 87

Пример кода где?
Используйте
window.innerHeight
Ответить с цитированием
  #3 (permalink)  
Старый 08.06.2016, 17:33
Новичок на форуме
Отправить личное сообщение для Mixeyka Посмотреть профиль Найти все сообщения от Mixeyka
 
Регистрация: 08.06.2016
Сообщений: 8

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 08.06.2016, 21:16
Новичок на форуме
Отправить личное сообщение для Mixeyka Посмотреть профиль Найти все сообщения от Mixeyka
 
Регистрация: 08.06.2016
Сообщений: 8

Неужели вопрос такой сложный?
Ответить с цитированием
  #5 (permalink)  
Старый 08.06.2016, 21:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Mixeyka,
ширина-высота-страницы-с-учётом-прокрутки
Ответить с цитированием
  #6 (permalink)  
Старый 08.06.2016, 22:39
Новичок на форуме
Отправить личное сообщение для Mixeyka Посмотреть профиль Найти все сообщения от Mixeyka
 
Регистрация: 08.06.2016
Сообщений: 8

Сообщение от рони
ширина-высота-страницы-с-учётом-прокрутки
Да это не к вопросу совсем.
К body то доступа нет, если по правилам оформлять(в представленной мной программе).
Ответить с цитированием
  #7 (permalink)  
Старый 09.06.2016, 00:04
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

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>
Ответить с цитированием
  #8 (permalink)  
Старый 09.06.2016, 08:11
Новичок на форуме
Отправить личное сообщение для Mixeyka Посмотреть профиль Найти все сообщения от Mixeyka
 
Регистрация: 08.06.2016
Сообщений: 8

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' - Представленный тобой способ похоже единственный.

Ну это же херов бред!!! Не очень то приятное впечатление от знакомства с языком, честно говоря.
Ответить с цитированием
  #9 (permalink)  
Старый 09.06.2016, 22:35
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

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


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить содержимое тега script vanpitkinobi@yandex.ru Events/DOM/Window 2 14.04.2016 14:10
Как заставить скрипт обновить свои знания о dom? l-liava-l Оффтопик 6 21.02.2013 16:21
как получить значение ид-а, из текушего хтмл тега dadli Общие вопросы Javascript 2 28.01.2012 15:16
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30
А как зделать скрипт, чтобы например скрипт 1 заменялся скриптом 2? yura371 Общие вопросы Javascript 3 06.01.2009 22:40