Hướng dẫn get width of element javascript - lấy chiều rộng của phần tử javascript

Question

Tóm tắt: Trong hướng dẫn này, bạn sẽ học cách có được kích thước được tính toán hiện tại của một yếu tố, bao gồm cả chiều rộng và chiều cao.: in this tutorial, you will learn how to get the current computed dimension of an element, including width and height.

Nội dung chính Show

ClientWidth & ClientHeight
Bản tóm tắt
Làm thế nào để bạn tìm thấy chiều rộng của một phần tử?
Làm cách nào để có được chiều rộng của một div?
OffsetWidth trong JavaScript là gì?
Làm thế nào được tính toán offsetwidth?

Hình ảnh sau đây hiển thị mô hình hộp CSS bao gồm phần tử khối với nội dung, đệm, đường viền và lề:

Để có được phần tử chiều rộng và chiều cao bao gồm phần đệm và đường viền, bạn sử dụng các thuộc tính offsetWidth và

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

0 của phần tử:

let box = document.querySelector('.box');
let width = box.offsetWidth;
let height = box.offsetHeight;
Code language: JavaScript (javascript)

Hình ảnh sau đây minh họa offsetWidth và

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

0 của một yếu tố:

Hướng dẫn get width of element javascript - lấy chiều rộng của phần tử javascript

Xem ví dụ sau:

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>



Code language: HTML, XML (xml)

Output:

{width: 122, height: 172}
Code language: CSS (css)

Trong ví dụ này:

Chiều rộng là 100px
Đường viền là 1px ở mỗi bên, vì vậy 2px cho cả hai
Phần đệm 10px ở mỗi bên, vì vậy 20px cho cả hai

Do đó, tổng chiều rộng 12px. Tương tự, chiều cao là 172px.

Để có được chiều rộng & chiều cao của một phần tử là điểm nổi sau khi chuyển đổi CSS, bạn sử dụng phương pháp

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

3 của phần tử DOM. Ví dụ:

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });

        const domRect = box.getBoundingClientRect();
        console.log(domRect);
    script>
body>

html>
Code language: HTML, XML (xml)

Output:

{width: 122, height: 172}

DOMRect {x: 7.997685432434082, y: 7.997685432434082, width: 121.95602416992188, height: 171.95602416992188, top: 7.997685432434082, …}



Code language: CSS (css)

ClientWidth & ClientHeight

Để có được phần tử chiều rộng và chiều cao bao gồm đệm nhưng không có đường viền, bạn sử dụng các thuộc tính

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

4 và

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

5:

let box = document.querySelector('.box');
let width = box.clientWidth;
let height = box.clientHeight;
Code language: JavaScript (javascript)

Hình ảnh sau đây minh họa cho

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

4 và

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

5 của một yếu tố:

Để có được lề của một phần tử, bạn sử dụng phương thức

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

8:

let box = document.querySelector('.box');
let style = getComputedStyle(box);

let marginLeft = parseInt(style.marginLeft);
let marginRight = parseInt(style.marginRight);
let marginTop = parseInt(style.marginTop);
let marginBottom = parseInt(style.marginBottom);
Code language: JavaScript (javascript)

Để có được chiều rộng biên của một phần tử, bạn sử dụng thuộc tính của đối tượng

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

9 được trả về bằng phương thức

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Elementtitle>
head>

<body>
    <div class="box" style="width:100px;height:150px;border:solid 1px #000;padding:10px">div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        console.log({ width, height });
    script>
body>

html>
Code language: HTML, XML (xml)

8:

let box = document.querySelector('.box');
let style = getComputedStyle(box);

let borderTopWidth = parseInt(style.borderTopWidth) || 0;
let borderLeftWidth = parseInt(style.borderLeftWidth) || 0;
let borderBottomWidth = parseInt(style.borderBottomWidth) || 0;
let borderRightWidth = parseInt(style.borderRightWidth) || 0;
Code language: JavaScript (javascript)

Để có được chiều cao và chiều rộng của cửa sổ, bạn sử dụng mã sau:

let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
Code language: JavaScript (javascript)

Bản tóm tắt

Sử dụng các thuộc tính OffsetWidth & OffSetheight của phần tử DOM để có được chiều rộng và chiều cao của nó.

Hướng dẫn này có hữu ích không?

Làm thế nào để bạn tìm thấy chiều rộng của một phần tử?

Để tìm chiều rộng và chiều cao của một phần tử, các phương thức chiều rộng () và chiều cao () được sử dụng. Phương thức chiều rộng () được sử dụng để kiểm tra chiều rộng của một phần tử. Nó không kiểm tra phần đệm, đường viền và lề của phần tử.width() and height() methods are used. The width() method is used to check the width of an element. It does not check the padding, border and margin of the element.

Làm cách nào để có được chiều rộng của một div?

Để đo chiều rộng của phần tử DIV, chúng tôi sẽ sử dụng thuộc tính offsetWidth của JavaScript.Thuộc tính này của JavaScript trả về một số nguyên đại diện cho độ rộng bố cục của một phần tử và được đo bằng pixel.Giá trị trả về: Trả về chiều rộng pixel bố cục của phần tử tương ứng.utilize the offsetWidth property of JavaScript. This property of JavaScript returns an integer representing the layout width of an element and is measured in pixels. Return Value: Returns the corresponding element's layout pixel width.

OffsetWidth trong JavaScript là gì?

Thông thường, offsetWidth là một phép đo trong các pixel có chiều rộng CSS của phần tử, bao gồm mọi đường viền, đệm và cuộn dọc (nếu được hiển thị).Nó không bao gồm chiều rộng của các yếu tố giả như :: trước hoặc :: sau.Nếu phần tử được ẩn (ví dụ, bằng cách đặt kiểu.a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after . If the element is hidden (for example, by setting style.

Làm thế nào được tính toán offsetwidth?

OffsetWidth, OffSetheight: Kích thước của hộp trực quan bao gồm tất cả các đường viền.Có thể được tính toán bằng cách thêm chiều rộng / chiều cao và mái chèo và đường viền, nếu phần tử có hiển thị: khối.ClientWidth, ClientHeight: Phần trực quan của nội dung hộp, không bao gồm biên giới hoặc thanh cuộn, nhưng bao gồm đệm.adding width / height and paddings and borders, if the element has display: block. clientWidth , clientHeight : The visual portion of the box content, not including borders or scroll bars , but includes padding .

programming javascript offsetWidth jQuery Get height div Get element width scrollWidth clientWidth Set element width

Hướng dẫn get width of element javascript - lấy chiều rộng của phần tử javascript

ClientWidth & ClientHeight

Bản tóm tắt

Làm thế nào để bạn tìm thấy chiều rộng của một phần tử?

Làm cách nào để có được chiều rộng của một div?

OffsetWidth trong JavaScript là gì?

Làm thế nào được tính toán offsetwidth?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội