Последние учебники веб-разработки
×

JavaScript Справка

обзор

JavaScript

JS строка JS Число JS операторы JS Заявления JS математический JS Дата JS массив JS логический JS RegExp JS Глобальный JS конверсионный

браузер BOM

Window Navigator Screen History Location

HTML DOM

DOM Документ DOM элементы DOM Атрибуты DOM Мероприятия DOM Стиль

HTML Объекты

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Другие объекты

CSSStyleDeclaration


 

HTML DOM offsetHeight Propery

<Элемент объекта

пример

Получить высоту и ширину <div> элемент, включая обивку и границы:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Результат TXT будет:

Height with padding and border: 280px
Width with padding and border: 430px
Попробуй сам "

Больше "Try it Yourself" примеры ниже.

Определение и использование

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

Причина , по которой "viewable" указывается слово, потому что если содержание элемента является выше , чем фактическая высота элемента, это свойство будет возвращать только высоту , которая видна (See "More Examples") в (See "More Examples") .

Примечание: Для того, чтобы понять это свойство, вы должны понимать CSS Box Model .

Подсказка: Это свойство часто используется вместе с offsetWidth собственности.

Совет: Используйте clientHeight и clientWidth свойства вернуть видимую высоту и ширину элемента, только включая дополнения.

Совет: Для того, чтобы добавить полосы прокрутки к элементу, используйте CSS переполнения свойства.

Это свойство только для чтения.

Поддержка браузеров

Имущество
offsetHeight да да да да да

Синтаксис

element .offsetHeight

Технические подробности

Возвращаемое значение: A Количество, представляющее видимую высоту элемента в пикселях, в том числе обивки, границы и скроллбара
Примеры

Еще примеры

пример

Этот пример демонстрирует разницу между clientHeight / clientWidth и offsetHeight / offsetWidth:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Результат TXT будет:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Попробуй сам "

пример

Этот пример демонстрирует разницу между clientHeight / clientWidth и offsetHeight / offsetWidth, когда мы добавим скроллбар к элементу:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Результат TXT будет:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Попробуй сам "

<Элемент объекта