«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Window - это основной объект JavaScript. И он же глобальный объект браузера. Window также может рассматриваться как корень объектной модели документа DOM.

window.document или просто document - это основной объект визуализированной/видимой  объектной модели документа DOM. document содержит HTML-структуру.

window.screen или просто screen - это небольшой информационный объект о физических размерах экрана. Немного о screen.

В консоли при помощи команды console.dir можно посмотреть все свойства любого объекта.

Далее пойдет речь о размерах элементов DOM.



Cвойства clientWidth и clientHeight

Свойства clientWidth и clientHeight - обозначают размер элемента внутри рамок border.

Это ширина и высота содержимого вместе с полями padding, но без прокрутки.

HTML-код

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   	<title>JavaScript</title>
   	<link rel="stylesheet" href="style.css">
  </head>
  <body>
 <!--noindex-->   
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus inventore, repudiandae laborum dolorem fuga repellendus dignissimos excepturi error sapiente laudantium, doloribus ut dolores ad autem quidem quis accusamus voluptas quae. Quam iusto sapiente quaerat dolorum blanditiis accusantium eligendi quas assumenda. Nostrum, ipsa dolorum repellat rem laborum voluptatibus ratione officiis illo quisquam optio perspiciatis accusamus tenetur, voluptate eligendi quibusdam incidunt, dolore repellendus error quis itaque libero nobis, provident voluptates dolor. Facilis exercitationem itaque eos consectetur vel incidunt nostrum cupiditate illo sunt, tenetur nihil laboriosam ratione in quas blanditiis natus doloremque aliquid rem nam, similique illum vero consequuntur labore sapiente? Perferendis veniam provident magni repellendus ad veritatis quod unde vero animi, aut quis suscipit ipsa asperiores enim, qui blanditiis ratione accusamus mollitia perspiciatis consectetur officiis eius aliquam. A adipisci at repellat impedit. Eaque ad, eum laudantium deserunt. Quis error voluptatem tempora quam ducimus aut, architecto odio voluptatum reiciendis. Atque error, deleniti similique non nam ratione. Perferendis, officiis mollitia laboriosam quam, nisi vel obcaecati vero dicta ducimus dolorum quas, excepturi consequatur fugiat sit minima repellendus quia aliquid numquam id autem unde dolorem quaerat odit. Harum eaque dolor dicta, accusantium deserunt eius deleniti nisi quas assumenda consectetur, odit modi exercitationem, officia doloribus quidem perferendis repellendus quos commodi eveniet cum beatae ea molestiae reprehenderit. Facilis, iste corporis earum. Nemo aliquam architecto error facilis amet, nihil sed excepturi necessitatibus rem delectus, omnis ipsa ut temporibus expedita quas natus ipsum fuga eum harum nisi facere cupiditate reiciendis! Id magnam blanditiis eligendi, nulla accusamus magni. Placeat quidem repellat explicabo minus esse numquam velit, accusantium a, cumque aperiam iure alias natus aliquam minima quas possimus assumenda quod, doloremque saepe perspiciatis nulla vero quibusdam voluptates. Nihil, aliquam maiores earum non similique quos? Quos cumque est illum assumenda perspiciatis, obcaecati atque doloribus cum soluta sit qui, deserunt reprehenderit quibusdam ratione odio similique a, quod cupiditate! Accusamus hic minus numquam, repellendus, ullam beatae itaque ad laudantium doloremque dolore error praesentium provident consequuntur consectetur culpa necessitatibus facere. Adipisci dignissimos fugiat consequuntur temporibus magni eius deleniti. Reiciendis, distinctio nesciunt modi repellendus aperiam quia dolore porro, pariatur eos. Ducimus iusto officiis cupiditate, error modi eius, dolores maxime a eaque tenetur? Quae nulla reprehenderit voluptatibus fugit cum distinctio hic libero maiores fugiat, atque amet qui cupiditate pariatur quaerat illo similique sunt doloribus modi reiciendis blanditiis in voluptatem esse. Hic voluptates atque beatae nihil ad perspiciatis repudiandae, consequuntur non nesciunt maiores alias eos odit, officiis inventore eaque aperiam voluptatibus. Fugiat eum esse nam saepe soluta ab accusamus nemo fuga aut, distinctio officia atque. Voluptatibus perspiciatis magni harum incidunt aliquid temporibus quas labore exercitationem. Alias mollitia magnam sequi, totam corrupti temporibus facere praesentium iste velit aliquam minus enim cupiditate rem. Iste molestiae maxime illum non accusantium voluptas blanditiis, quod consectetur, quidem est culpa voluptates obcaecati, ipsum ab natus vitae! Consectetur animi quae tenetur odio repellendus natus tempora ipsa culpa, inventore accusamus ea corporis doloribus id harum voluptatem, praesentium temporibus, explicabo totam mollitia molestiae est iusto vel repellat molestias. Repellat placeat voluptas quaerat eaque, illum dicta rerum numquam sunt!</div><!--/noindex-->
    <button>Click</button>
    
	<script src="script.js"></script>
  </body>
</html>

 

Пример №1 - НЕТ свойства box-sizing: border-box

CSS-код

.box {
  /* box-sizing: border-box; */
  width: 400px;
  height: 350px;
  overflow: scroll;
  margin: 0 auto;
  margin-top: 50px;
  padding: 10px;
  border: red solid 5px;
}
button {
  width: 100px;
  height: 40px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;   
}

JavaScript-код

'use strict';

const box = document.querySelector('.box');

console.log(box.clientWidth);
console.log(box.clientHeight);

Результат в Браузере

Файл CSS: width: 400px; height: 350px; padding: 10px.

В результате: offsetWidth: 405 и offsetHeight: 355.

Ширина и высота содержимого вместе с полями padding, но без прокрутки.

Размеры содержимого блока увеличиваются на ширину полей padding, но также учитывается, что в эти размеры НЕ входит полоса прокрутки, шириной 15px.

Ширина полосы прокрутки в разных браузерах может различаться. Результат браузер Ghrome: clientWidth: 403 и clientHeight: 353.

clientWidth/Height + box-sizing

В CSS-файле свойство box-sizing: border-box присутствует.

Пример № 1.2 - ЕСТЬ свойство box-sizing: border-box

CSS-код

.box {
  box-sizing: border-box;
  width: 400px;
  height: 350px;
  overflow: scroll;
  margin: 0 auto;
  margin-top: 50px;
  padding: 10px;
  border: red solid 5px;
}
button {
  width: 100px;
  height: 40px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;   
}

JavaScript-код

'use strict';

const box = document.querySelector('.box');

console.log(box.clientWidth);
console.log(box.clientHeight);

Результат в Браузере

Файл CSS: width: 400px; height: 350px; padding: 10px; border: 5px.

В результате: clientWidth: 375 и clientHeight: 325.

Размеры содержимого блока НЕ увеличиваются на ширину полей padding, а также учитывается, что в эти размеры НЕ входит полоса прокрутки, шириной 15px и размер границы 5px с каждой из сторон, то есть еще - 10px для clientWidth и clientHeight.

Ширина полосы прокрутки в разных браузерах может различаться. Результат браузер Ghrome: clientWidth: 373 и clientHeight: 323.



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?

Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432