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

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 offsetWidth 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" примеры ниже.

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

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

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

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

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

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

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

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

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

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

Синтаксис

element .offsetWidth

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

Возвращаемое значение: 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
Попробуй сам "

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