Phương thức innerWidth và innerHeight trong jQuery

Với các phương thức innerWidth và innerHeight, chúng ta nhận được chiều rộng và chiều cao của các phần tử, nhưng lần này bao gồm không chỉ nội dung mà còn cả phần đệm bên trong - padding.

Hãy lấy giá trị chiều rộng và chiều cao của đoạn văn #test, nhưng lần này bằng cách sử dụng innerWidth và innerHeight, và xuất chúng ra một đoạn văn khác. Giả sử chúng ta có hai đoạn văn:

<p id="test">văn bản</p>
<p id="out"></p>

CSS trông như thế này:

p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}

Trong Javascript, chúng ta viết mã sau:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Chiều rộng: ' + w + ' Chiều cao: ' + h);

Như bạn thấy, các giá trị đã khác nhau 10px, vì phần đệm bên trong được tính đến, trong trường hợp của chúng ta là 5px ở tất cả các phía.

Cũng đơn giản với các phương thức innerWidth và innerHeight, chúng ta có thể thay đổi giá trị chiều rộng và chiều cao của các phần tử. Ví dụ, hãy đặt chiều rộng của div #test1 bằng 250px và chiều cao của #test2 - 200px:

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

Hoàn thành giải pháp cho nhiệm vụ đầu tiên - hãy xuất trong đoạn văn thứ hai bên dưới div #wrapper giá trị chiều rộng và chiều cao của div #wrapper, lần này có tính đến phần đệm bên trong, nhưng không tính đến đường viền và phần đệm bên ngoài.