Phương thức width và height trong jQuery

Các phương thức width và height lấy theo thứ tự, chiều rộng và chiều cao của nội dung phần tử mà không tính đến padding, border và margin.

Hãy lấy giá trị chiều rộng và chiều cao của đoạn văn #test và xuất chúng ra một đoạn văn khác. Lấy, ví dụ mã HTML sau:

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

Kiểu CSS của đoạn văn trông như thế này:

p {
	margin: 10px;
	padding: 5px;
}

Bây giờ viết mã Javascript:

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

Cũng đơn giản với các phương thức này 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').width(250);
$('#test2').height(200);

Chúng ta có bố cục như thế này:

<div id="wrapper">
<div id="test">văn bản</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

Các kiểu CSS sau:

div {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}

Lấy và xuất giá trị chiều rộng và chiều cao của div #wrapper không tính đến khoảng cách đệm và đường viền. Xuất các giá trị vào đoạn văn đầu tiên bên dưới div này.