Html тег . описание. примеры использования div

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: .

Синтаксис:

Вызов записывает на страницу «прямо здесь и сейчас». Строка может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

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

Если вызвать его позже, то существующее содержимое документа затрётся.

Например:

Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

Это его недостаток.

Есть и преимущество. Технически, когда запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.

Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

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

Как получить отдельно значение красного (Red), зеленого (Green), синего (Blue) цветов из RGB значения цвета? splitRGB, HEX2RGB

Например, из цвета Lime (#00FF00, rgb(0,255,0) или rgb(0%,100%,0%)) получить массив из трех элементов (0,128,0), где нулевой элемент массива соответствует красному, первый зеленому, а второй синему цветам.

function splitRGB(color)
{
  color = getHexRGBColor(color); 
  var matches = color.match(/^#?({2})({2})({2})$/i);
    
  if (!matches) return false;
  
  for (var i=1, rgb = new Array(3);  i<=3; i++) rgb = parseInt(matches,16);
  
  return rgb;
}

Пример:

var rgbArr = splitRGB("FEC400");
var R = rgbArr;
var G = rgbArr;
var B = rgbArr;

*Функция splitRGB() использует ф-ю getHexRGBColor(), описанную в вопросе .

Прокрутка документа

В JavaScript имеются следующие методы объекта для прокрутки документа:

() — прокручивает страницу до указанного места в абсолютном выражении;
— прокручивает документ на определённое количество пикселей относительно текущей позиции.

Синтаксис метода (метод выполняет то же самое, что и не отличается по синтаксису):

// 1 вариант
window.scroll(left, top); // left - по оси Х, top - по оси Y

// 2 вариант
window.scroll({
  left: 0, // до какого количества пикселей прокрутить вправо
  top: 0, // до какого количество пикселей прокрутить вниз
  behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно
});

Синтаксис метода :

// 1 вариант
window.scrollBy(left, top); // left - по оси Х, top - по оси Y

// 2 вариант
window.scrollBy({
  left: 0, // на какое количество пикселей прокрутить вправо от текущей позиции
  top: 0, // на какое количество пикселей прокрутить вниз от текущей позиции
  behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно
});

Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод или с определёнными значениями:

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

Код в действии:

Нажмите на ссылку:

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:

//выбираем нужные элементы
var a = document.querySelectorAll('.link');
    
//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
    }
});

Изменение размеров окна

Методы объекта window для изменения размеров окна:

– изменяет ширину () и высоту () окна на указанные значения;
– изменяет ширину () и высоту () окна на указанные величины относительно его текущих размеров.

В JavaScript методы и выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).

Синтаксис «»:

// width и height – новая ширина и высота окна в пикселях
window.resizeTo(width, height);

Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

// получаем 1/2 доступной ширины экрана в пикселях
const width = window.screen.availWidth / 2;
// получаем 1/2 доступной высоты экрана в пикселях
const height = window.screen.availHeight / 2;
// устанавливаем окну ширину и высоту
window.resizeTo(width, height);

Синтаксис «»:

window.resizeBy(deltaX, deltaY);

// deltaX и deltaY – количество пикселей на которые нужно увеличить размеры окна соответственно по горизонтали и вертикали

Например, уменьшим размеры окна (его ширину и высоту) на 50px:

window.resizeBy(-50, -50);

Пример:

<script>
var myWindow;
function openWindow() {
  myWindow = window.open('', '', 'width=200,height=200');
}
function resizeWindowTo() {
  if (myWindow && !myWindow.closed) {
    myWindow.resizeTo(300,300);
    myWindow.focus();
  }
}
function resizeWindowBy(x,y) {
  if (myWindow && !myWindow.closed) {
    myWindow.resizeBy(x,y);
    myWindow.focus();
  }
}
</script>
...
<button onclick="openWindow()">Открыть окно</button>
<button onclick="resizeWindowTo()">Изменить ширину и высоту окна браузера (300,300)</button>
<button onclick="resizeWindowBy(25,25)">Увеличить ширину и высоту окна браузера на 25px</button>
<button onclick="resizeWindowBy(-25,0)">Уменьшить ширину окна на 25px</button>
<button onclick="resizeWindowBy(25,0)"> Увеличить ширину окна на 25px</button>
<button onclick="resizeWindowBy(0,-25)"> Уменьшить высоту окна на 25px</button>
<button onclick="resizeWindowBy(0,25)"> Увеличить высоту окна на 25px</button>

Создания элементов и текстовых узлов

Создание элемента в JavaScript выполняется с помощью метода :

// $elem – переменная, в которую сохраним созданный элемент
const $elem = document.createElement('tag');

Вместо необходимо указать тег того элемента, который нужно создать.

Например, создадим элемент p:

const $elem = document.createElement('p');

Создание текстового узла в JavaScript осуществляется посредством метода :

const text = document.createTextNode('text');

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

Например, создадим текстовый узел с текстом «Я новый текстовый узел»:

const text = document.createTextNode('Я новый текстовый узел');

Я хочу получить значение CSS свойства, но возвращается пустая строка. Например, хочу узнать цвет текста элемента и пишу document.getElementById(«elemId»).style.color, а результат пустая строка. Что делать?

Объект style элемента (document.getElementById(«elementId»).style), содержит только те значения, которые были заданны явно в атрибуте style в тэге элемента или были предварительно назначены через скрипт. Если Вы задаёте CSS свойства через тэг <STYLE></STYLE> или внешние листы стилей, то они не будут присутствовать в объекте style элемента.

Возникает вопрос, как узнать вычисленное значение свойства элемента, если оно не задано в атрибуте style элемента и не было инициализировано через скрипт?

Воспользуйтесь функцией (работает начиная с NN 6, IE 5, Opera 7):

function getElementComputedStyle(elem, prop)
{
  if (typeof elem!="object") elem = document.getElementById(elem);
  
  // external stylesheet for Mozilla, Opera 7+ and Safari 1.3+
  if (document.defaultView && document.defaultView.getComputedStyle)
  {
    if (prop.match(//)) prop = prop.replace(/()/g, "-$1").toLowerCase();
    return document.defaultView.getComputedStyle(elem, "").getPropertyValue(prop);
  }
  
  // external stylesheet for Explorer and Opera 9
  if (elem.currentStyle)
  {
    var i;
    while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2);
    return elem.currentStyle;
  }
  
  return "";
}

Функция принимает два аргумента: id элемента или сам элемент и название свойства в формате W3C/CSS или аналогичное название свойства в JavaScript нотации (в таком же виде в котором вы его указываете при доступе через объект style).

Примеры:

var color = getElementComputedStyle("elemID", "color");

var elem = document.getElementById("elemID");

var bg = getElementComputedStyle(elem, "background-color");

var bg = getElementComputedStyle(elem, "backgroundColor");

DocumentFragment

– это облегчённая версия . Он используется в качестве обёртки для временного хранения HTML элементов.

После формирования фрагмента его можно использовать в различных методах (например, , и др.). При этом, когда мы его вставляем, то вставляется только его содержимое.

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

Например, переместим все четные в новый :

<ul id="source-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul id="target-list"></ul>

<script>
  const $evenLi = document.querySelectorAll('#source-list li:nth-child(even)');
  // создадим пустой фрагмент
  let $fragment = new DocumentFragment();
  $evenLi.forEach(($li) => {
    // добавим в фрагмент элемент $li
    $fragment.appendChild($li);
  });
  // вставим фрагмент в #target-list
  document.querySelector('#target-list').appendChild($fragment);
</script>

Ещё один пример, в котором добавим в десять :

<ul id="list"></ul>

<script>
  const $list = document.querySelector('#list');
  // создадим пустой фрагмент
  let $fragment = new DocumentFragment();
  for(let i = 0; i < 10; i++) {
    const $li = document.createElement('li');
    $li.textContent = 'item-' + i;
    // добавим в фрагмент элемент $li
    $fragment.appendChild($li);
  }
  // вставим фрагмент в #target-list
  document.querySelector('#list').append($fragment);
</script>

Использование в подобных сценариях может значительно ускорить ваш сайт. Т.к. изменение DOM — это очень затратная операция. А с помощью это можно сделать всего за одну операцию.

не является частью видимой DOM. Изменения, внесенные во фрагмент, не влияют на документ и производительность страницы.

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

Например, перепишем первый пример с использованием :

<ul id="source-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<ul id="target-list"></ul>

<script>
  const $evenLi = document.querySelectorAll('#source-list li:nth-child(even)');
  // создадим пустой массив
  let $list = [];
  $evenLi.forEach(($li) => {
    // добавим в массив $target элемент $li
    $list.appendChild($li);
  });
  // вставим массив элементов в #target-list
  document.querySelector('#target-list').append(...$list);
</script>

8 ответов

Лучший ответ

Как я понял, желаемый эффект, который вы хотите, — это прокрутить до конца списка (или прокручиваемого элемента div), когда что-то происходит (например, элемент добавляется в список). Если это так, вы можете прокрутить до конца элемент контейнера (или даже саму страницу), используя только чистый Javascript и селекторы VueJS.

Я привел рабочий пример в этой скрипке: https://jsfiddle.net/my54bhwn

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

Надеюсь, это поможет вам.

Italo Ayres
22 Ноя 2016 в 08:32

Если вам нужно поддерживать IE11 и Edge, вы можете использовать:

Если вам не нужно поддерживать IE11, будет работать следующее (более понятный код):

Katinka Hesselink
25 Ноя 2019 в 15:38

Используйте атрибут ref для элемента DOM для справки

Вам нужно настроить ЧАСЫ

Убедитесь, что вы используете правильный CSS

Alpesh Patil
17 Ноя 2019 в 20:16

Вот простой пример использования #ref для прокрутки до конца div.

Обратите внимание, что поместив в HTML, вы получите доступ к элементу через

Daolagajao
15 Дек 2017 в 17:03

Я попробовал принятое решение, и оно не сработало для меня. Я использую отладчик браузера и выяснил, что фактическая высота, которую следует использовать, это НО , которую вы должны поместить в ловушку , чтобы все решение работало.

juliangonzalez
14 Фев 2017 в 21:57

У меня была такая же потребность в моем приложении (со сложной структурой вложенных компонентов), и мне, к сожалению, не удалось заставить его работать.

Наконец, я использовал vue-scrollto, который отлично работает!

Ousmane
31 Май 2019 в 11:41

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

Затем, если вы хотите прокрутить этот элемент при загрузке страницы, вы можете вызвать этот метод следующим образом:

В противном случае, если вы хотите прокрутить его до нажатия кнопки или другого действия, вы можете вызвать его так же:

maxshuty
21 Мар 2020 в 14:55

В связанном вопросе, который вы разместили, у нас уже есть способ добиться этого в простом javascript, поэтому нам нужно только получить ссылку js на узел dom, который мы хотим прокрутить.

можно использовать для объявления ссылки на элементы html, чтобы сделать их доступно в компонентных методах vue.

Или, если является обработчиком для какого-либо события пользовательского интерфейса, и цель связана с элементом div, который вы хотите прокрутить в пространстве, вы можете просто вместе с требуемыми аргументами и выполните прокрутку, как .

PanJunjie潘俊杰
22 Ноя 2016 в 07:31

Вступление.

При создании сайта очень часто возникает необходимость реализовать вертикальную прокрутку контента внутри блока . Многие из вас скажут, что нет ничего проще, достаточно установить фиксированную высоту блока и задать его свойству значение или . Действительно, этого вполне достаточно, но, в большинстве случаев, полосы прокрутки нарушают дизайн веб-страницы.

В этой статье я расскажу вам, как сделать прокрутку контента в блоке и сам скроллбар c помощью JavaScript используя событиt . Подробно рассмотрим HTML-вёрстку, CSS и сам код на чистом JavaScript.

Составим техническое задание на создание прокрутки контента внутри блока:

Прокрутка должна осуществляется колёсиком мыши при наведении на выбранный блок или перетаскиванием ползунка скроллбара.
Блок должен иметь кастомный скроллбар с высотой ползунка, зависящей от размера контента внутри блока.
При прокрутке контента в блоке использовать стандартное событие scroll.
На странице может быть несколько блоков с прокруткой контента.
Ширина и высота блоков с прокруткой не должна влиять на работу скрипта.

Ширина/высота окна

Чтобы получить ширину/высоту окна, можно взять свойства из :

Например, эта кнопка показывает высоту вашего окна:

alert(document.documentElement.clientHeight)

Не

Браузеры также поддерживают свойства . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?

Если есть полоса прокрутки, и она занимает какое-то место, то свойства указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.

А включают в себя полосу прокрутки.

Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:

В большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать .

– это важно

Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в HTML нет. Возможны странности

В современном HTML мы всегда должны указывать .

Как узнать координаты мыши (положение курсора мыши) относительно окна документа?

Поводите мышкой по коду функции ниже и смотрите при этом на строку состояния.

IE5+, Mozilla/Gecko, Opera 7+

function mousePageXY(e)
{
  var x = 0, y = 0;

  if (!e) e = window.event;

  if (e.pageX || e.pageY)
  {
    x = e.pageX;
    y = e.pageY;
  }
  else if (e.clientX || e.clientY)
  {
    x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
    y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
  }

  return {"x":x, "y":y};
}

Функция возвращает объект со свойствами x, y, определяющими координаты курсора.

Пример использования:

document.onmousemove = function(e){var mCur = mousePageXY(e); window.status = "X:"+mCur.x+" - Y:"+mCur.y;};

Рассмотрим код пошагово

Так как ширина индикатора прокрутки зависит от полной высоты страницы, поэтому в самом начале необходимо убедится, что загружены все ресурсы, которые могут повлиять на полную высоту страницы, такие как изображения, стили и так далее

Создадим основную функцию, чтобы вся логика индикатора прокрутки была в одном месте

Сразу же вызовем эту функцию для просмотра результата в браузере

Создадим элемент

Назначим ему класс progress —

Так как мы создали новый элемент, то можем ему назначить инлайновые стили через .

перезаписывает все существующие стили, поэтому его актуально использовать для новых элементов

Стили в запишем используя обратные кавычки для лучшей читаемости

В результате получим такой элемент —

Вставим созданный элемент в начало

Напишем функцию progressWidth, которая будет рассчитывать и возвращать ширину индикатора прокрутки в процентах в зависимости от прокрутки страницы

Логика расчета — узнаём на сколько страница прокручена и делим это значение на разницу полной высоты страницы и высоты окна браузера, и полученный результат умножаем на 100, чтобы получить значение в процентах

Math.floor() — округляет до ближайшего меньшего целого числа

Вызовем функцию progressWidth сразу после объявления, чтобы индикатор прокрутки отображался корректно при загрузке страницы

Также будем вызывать функцию progressWidth при прокрутке страницы и изменении размеров окна браузера

Передаем только название функции progressWidth без круглых скобок, так как необходимо чтобы она вызывалась только при событии прокрутки страницы или изменении размеров окна браузера

Индикатор прокрутки готов, но я хотел бы обратить внимание на оптимизацию при использовании событий прокрутки страницы и изменении размеров окна браузера — об этом ниже

Запретить прокрутку

Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно установить .

Попробуйте сами:

Первая кнопка останавливает прокрутку, вторая возобновляет её.

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

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

Это выглядит немного странно, но это можно обойти, если сравнить до и после остановки, и если увеличится (значит полоса прокрутки исчезла), то добавить в вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.

Не стоит брать width/height из CSS

Мы рассмотрели метрики, которые есть у DOM-элементов, и которые можно использовать для получения различных высот, ширин и прочих расстояний.

Но как мы знаем из главы Стили и классы, CSS-высоту и ширину можно извлечь, используя .

Так почему бы не получать, к примеру, ширину элемента при помощи , вот так?

Почему мы должны использовать свойства-метрики вместо этого? На то есть две причины:

Во-первых, CSS-свойства зависят от другого свойства – , которое определяет, «что такое», собственно, эти CSS-ширина и высота. Получается, что изменение , к примеру, для более удобной вёрстки, сломает такой JavaScript.
Во-вторых, CSS свойства могут быть равны , например, для инлайнового элемента:

Конечно, с точки зрения CSS – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в , который мы могли бы использовать для вычислений. Получается, что в данном случае ширина из CSS вообще бесполезна.

Есть и ещё одна причина: полоса прокрутки. Бывает, без полосы прокрутки код работает прекрасно, но стоит ей появиться, как начинают проявляться баги. Так происходит потому, что полоса прокрутки «отъедает» место от области внутреннего содержимого в некоторых браузерах. Таким образом, реальная ширина содержимого меньше CSS-ширины. Как раз это и учитывают свойства .

…Но с ситуация иная. Некоторые браузеры (например, Chrome) возвращают реальную внутреннюю ширину с вычетом ширины полосы прокрутки, а некоторые (например, Firefox) – именно CSS-свойство (игнорируя полосу прокрутки). Эти кроссбраузерные отличия – ещё один повод не использовать , а использовать свойства-метрики.

Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.

У элемента с текстом в стилях указано CSS-свойство .

На ОС Windows браузеры Firefox, Chrome и Edge резервируют место для полосы прокрутки. Но Firefox отображает , в то время как Chrome и Edge – меньше. Это из-за того, что Firefox возвращает именно CSS-ширину, а остальные браузеры – «реальную» ширину за вычетом прокрутки.

Обратите внимание: описанные различия касаются только чтения свойства из JavaScript, визуальное отображение корректно в обоих случаях

Удаление узлов

Удалить узел из DOM можно в JavaScript с помощью методов (считается устаревшим) и .

removeChild

Синтаксис :

parent.removeChild(node)

Для удаления узла необходимо вызвать метод у родительского элемента и передать ему в качестве аргумента его сам ().

Например, удалим второй в :

<ol id="devices">
  <li>Смартфон</li>
  <li>Планшет</li>
  <li>Ноутбук</li>
</ol>

<script>
const $liSecond = document.querySelector('#devices li:nth-child(2)');
// вызываем у родительского элемента метод removeChild и передаём ему в качестве аргумента узел который нужно удалить
$liSecond.parentNode.removeChild($liSecond);
</script>

В качестве результата метод возвращает удалённый узел.

Например, удалим элемент, а затем вставим его в другое место:

<div id="message-1">
  <p>...</p>
</div>

<div id="message-2"></div>

<script>
  const $p = document.querySelector('#message-1>p');
  // удалим элемент p
  const result = $p.parentElement.removeChild($p);
  // вставим удалённый элемент p в #message-2
  document.querySelector('#message-2').append(result);
</script>

remove

Ещё один способ удалить узел – это использовать метод .

Синтаксис :

node.remove()

Например, удалим элемент при нажатии на него:

<button>Кнопка</button>

<script>
document.querySelector('button').onclick = function() {
  // удалим элемент
  this.remove();
}
</script>

Когда мы вставляем элементы, они удаляются со старых мест.

Не стоит брать width/height из CSS

Мы рассмотрели метрики – свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.

Теперь несколько слов о том, как не надо делать.

Как мы знаем, CSS-высоту и ширину можно установить с помощью и извлечь, используя , которые в подробностях обсуждаются в главе Стили и классы.

Получение ширины элемента может быть таким:

Не лучше ли получать ширину так, вместо метрик? Вовсе нет!

Во-первых, CSS-свойства зависят от другого свойства – , которое определяет, что такое, собственно, эти ширина и высота. Получается, что изменение , к примеру, для более удобной вёрстки, сломает такой JavaScript.
Во-вторых, в CSS свойства могут быть равны , например, для инлайн-элемента:

Конечно, с точки зрения CSS размер – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина из CSS вообще бесполезна.

Есть и ещё одна причина.

Полоса прокрутки – причина многих проблем и недопониманий. Как говорится, «дьявол кроется в деталях». Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал «глючить» с ней.

Как мы говорили ранее, при наличии вертикальной полосы прокрутки, в зависимости от браузера, устройства и операционной системы, она может сдвинуть содержимое.

Получается, что реальная ширина содержимого меньше CSS-ширины. И это учитывают свойства .

…Но при этом некоторые браузеры также учитывают это в результате , то есть возвращают реальную внутреннюю ширину, а некоторые – именно CSS-свойство. Эти кросс-браузерные отличия – ещё один повод не использовать такой подход, а использовать свойства-метрики.

У элемента с текстом в стилях указано .

На момент написания этой главы при тестировании в Chrome под Windows выводил , а в Firefox – . При этом оба браузера показывали прокрутку. Это из-за того, что Firefox возвращал именно CSS-ширину, а Chrome – реальную ширину, за вычетом прокрутки.

Описанные разночтения касаются только чтения свойства из JavaScript, визуальное отображение корректно в обоих случаях.

Итоги

Размеры:

Для получения размеров видимой части окна используется свойство: document.documentElement.clientWidth/Height

Для получения размеров страницы с учётом прокрутки следует использовать:

var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

Прокрутка окна:

Прокрутку окна вы можете получить как window.pageYOffset (для горизонтальной – window.pageXOffset) везде, кроме браузера IE8-. На всякий случай – вот вам самый кросс-браузерный способ, учитывающий, также и IE7- в том числе:
var html = document.documentElement;
var body = document.body;

var scrollTop = html.scrollTop || body && body.scrollTop || 0;
scrollTop -= html.clientTop; // в IE7- смещён относительно (0,0)

alert( «Текущая прокрутка: » + scrollTop );

Установить прокрутку вы можете при помощи следующих специальных методов:
- window.scrollTo(pageX,pageY) – абсолютные координаты,
- window.scrollBy(x,y) – прокрутить относительно от текущего места.
- elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.