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

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 clientWidth Propery

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

пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Синтаксис

element .clientWidth

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

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

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