Nhận chiều rộng của phần tử trong CSS

Chỉnh sửa trong JSFiddle

 
Các thuộc tính scrollWidth và scrollHeight tương tự như các thuộc tính clientWidth và clientHeight, ngoại trừ việc chúng trả về kích thước thực của nội dung, bất kể kích thước thực sự hiển thị là bao nhiêu.

2. Sử dụng thuộc tính offsetWidth và offsetHeight

Ngoài ra, nếu bạn cần bao gồm đường viền và thanh cuộn, bạn có thể sử dụng thuộc tính offsetWidth và offsetHeight. Chúng trả về kích thước của nội dung hiển thị của phần tử, bao gồm phần đệm, đường viền và thanh cuộn. Nói cách khác, chúng trả về tổng dung lượng mà một phần tử chiếm

Ví dụ: đoạn mã sau sẽ trả về '522 × 122'

JS

1

2

3

var offsetWidth = tài liệu. getElementById('vùng chứa').offsetWidth;

var offsetHeight = tài liệu. getElementById('vùng chứa').offsetHeight;

cảnh báo(`${offsetWidth} x ${offsetHeight}`);

HTML

1

Chỉnh sửa trong JSFiddle

3. Sử dụng phương pháp clientHeight2

Phương thức getBoundingClientRect() trả về kích thước của phần tử. Nó trả về một đối tượng clientHeight3 với các thuộc tính width, height, left, top, right, bottom, x và clientHeight4. Chiều rộng và chiều cao được trả về của phần tử có thể là phân số (không giống như các thuộc tính ở trên) và bao gồm phần đệm và đường viền.

Ví dụ: đoạn mã sau trả về '522 × 122'

JS

1

2

3

4

5

var rect = tài liệu. getElementById('vùng chứa').getBoundingClientRect();

var chiều cao = đường thẳng. chiều cao;

var chiều rộng = rect. chiều rộng;

cảnh báo(`${width} x ${height}`);

HTML

1

Bạn có thể lấy chiều rộng của một phần tử trong CSS không?

Làm cách nào để tính chiều rộng CSS?

Làm cách nào để tìm chiều rộng div trong CSS?

Chiều rộng của một phần tử là gì?