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:

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

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

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

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

javascriptlet 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:

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