clientWidth và clientHeight trong JavaScript

Sử dụng clientWidth và clientHeight bạn có thể nhận được kích thước pixel của một phần tử HTML. Kích thước được tính toán bằng cách sử dụng kích thước của nội dung bên trong phần tử HTML, cùng với phần đệm.

Lưu ý : Đường viền, lề hoặc thanh cuộn (nếu có) bị loại trừ khi tính toán clientWidth và clientHeight

Sử dụng clientWidth và clientHeight

<div id="foo">   Hello World </div>

const clientWidth = document.querySelector('#foo').clientWidth; const clientHeight = document.querySelector('#foo').clientHeight;

Bài tập học tập

Như một bài tập, hãy thử tính giá trị của clientWidth và clientHeight của phần tử HTML sau:

ví dụ về clientheight client băng thông 1

/**********************************************  **  If the HTML element is <div id="foo"/>  **  **********************************************/ const clientWidth = document.querySelector('div#foo').clientWidth; const clientHeight = document.querySelector('div#foo').clientHeight; console.log(clientWidth, clientHeight); // --> 200, 100

Nó đã được tính toán như thế nào? Thêm phần đệm, với nội dung bên trong phần tử HTML và bỏ qua các lề và đường viền:

ví dụ về clientheight client băng thông 2

(10 + 50) + 140   // clientWidth === 200 (30) + 70         // clientHeight === 100

Hãy thử cái khác! Hãy thử tính toán clientWidth và clientHeight của phần tử HTML này:

ví dụ về clientheight client băng thông 3

(10 + 10) + 230   // clientWidth === 250 (30 + 20) + 70    // clientHeight === 120

Ghi chú

Cấp khối : clientWidth và clientHeight KHÔNG hoạt động với các phần tử HTML nội tuyến (như span , em hoặc a ). Nó sẽ chỉ trả về 0 !
Giá trị làm tròn : Giá trị được làm tròn đến số nguyên gần nhất. Nếu bạn cần các giá trị chính xác hơn, hãy sử dụng getBoundsClientRect ()
Chỉ đọc : Bạn không thể chỉ định giá trị mới để thay đổi kích thước của phần tử HTML. Ví dụ, điều này không làm bất cứ điều gì: someElement.clientWidth = 30

clientWidth và clientHeight được hỗ trợ trên tất cả các trình duyệt chính dành cho máy tính để bàn và thiết bị di động.

Xem thông số kỹ thuật chính thức của W3C để biết thông tin chi tiết về clientWidth và clientHeight .

Tags:

Các tin liên quan

Các phương pháp hay nhất để gỡ lỗi mã JavaScript trong trình duyệt
2019-07-05
Tối ưu hóa Tuyên bố chuyển đổi trong JavaScript
2019-06-18
Làm việc với Singletons trong JavaScript
2019-04-19
Cách sử dụng Axios với JavaScript
2019-04-05
Giới thiệu về Lặp lại và Trình lặp trong JavaScript
2019-03-13
D3.js: Hiểu các lựa chọn và so sánh với Vanilla JavaScript
2019-03-04
Xem xét Phạm vi, Ngữ cảnh, Tham chiếu Đối tượng và Thuyết minh trong JavaScript
2019-02-25
Sử dụng JavaScript Mixins
2019-02-12
Đọc mã nguồn JavaScript, sử dụng AST
2019-02-09
JavaScript Biểu thức chính quy cho Người bình thường
2019-02-07