Как наличие тега <!DOCTYPE html> влияет на скрипт?
Добрых суток.
Пишу свои первые скрипты. Хотел поуправлять размерами изображения в зависимости от размера экрана с помощью js (что css тут лучше подходит, я в курсе). Выяснилось, что в скрипте не могу получить доступ к тегу body и соответственно к свойству document.body.clientHeight, если сверху кода наличествует, как положено <!DOCTYPE html>. Нужную функцию вызываю из: <body onload="my_function();"> Как только убираю <!DOCTYPE html>, всё сразу работает нормально. Почему так? |
Пример кода где?
Используйте window.innerHeight |
<!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>
|
Неужели вопрос такой сложный?
|
|
Цитата:
К body то доступа нет, если по правилам оформлять(в представленной мной программе). |
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>
|
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' - Представленный тобой способ похоже единственный. Ну это же херов бред!!! Не очень то приятное впечатление от знакомства с языком, честно говоря. |
Mixeyka,
c clientHeight тоже работает. Только надо не на body (в некоторых источниках 'бодя'), а на html. document.documentElement.clientHeight // .... И обязательно пиксели указывать. |
| Часовой пояс GMT +3, время: 03:05. |