Trong quá trình phát triển giao diện web, việc xác định và điều chỉnh kích thước của phần tử (element dimensions) là rất quan trọng. jQuery cung cấp một bộ phương thức tiện lợi để thao tác với chiều rộng và chiều cao của phần tử DOM một cách dễ dàng và chính xác.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu chi tiết về:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

kèm theo các ví dụ minh họa cụ thể.

1. Phương thức width()

Phương thức width() trả về hoặc thiết lập chiều rộng nội dung của phần tử, không bao gồm padding, border và margin.

Cú pháp:

js
$(selector).width(); // Lấy chiều rộng
$(selector).width(value); // Thiết lập chiều rộng
  • value: giá trị chiều rộng (số hoặc chuỗi, ví dụ "200px").

Ví dụ:

html
Thử online
<div id="box" style="width: 300px; padding: 20px; border: 5px solid black;">Box</div>

<script>
  $(document).ready(function() {
    let width = $("#box").width();
    console.log(width); // Output: 300 (không tính padding, border)
  });
</script>

2. Phương thức height()

Tương tự như width(), phương thức height() dùng để lấy hoặc thiết lập chiều cao nội dung của phần tử.

Cú pháp:

js
$(selector).height(); // Lấy chiều cao
$(selector).height(value); // Thiết lập chiều cao

Ví dụ:

html
Thử online
<div id="box2" style="height: 150px; padding: 10px; border: 2px solid blue;">Box 2</div>

<script>
  $(document).ready(function() {
    let height = $("#box2").height();
    console.log(height); // Output: 150
  });
</script>

3. Phương thức innerWidth()

innerWidth() trả về chiều rộng nội dung + padding, nhưng không bao gồm border và margin.

Cú pháp:

js
$(selector).innerWidth();

Ví dụ:

html
Thử online
<div id="box3" style="width: 200px; padding: 15px; border: 3px solid red;">Box 3</div>

<script>
  $(document).ready(function() {
    let innerWidth = $("#box3").innerWidth();
    console.log(innerWidth); // Output: 200 + 15*2 = 230
  });
</script>

4. Phương thức innerHeight()

innerHeight() trả về chiều cao nội dung + padding, không tính border và margin.

Cú pháp:

js
$(selector).innerHeight();

Ví dụ:

html
Thử online
<div id="box4" style="height: 120px; padding: 20px; border: 2px solid green;">Box 4</div>

<script>
  $(document).ready(function() {
    let innerHeight = $("#box4").innerHeight();
    console.log(innerHeight); // Output: 120 + 20*2 = 160
  });
</script>

5. Phương thức outerWidth()

outerWidth() trả về chiều rộng nội dung + padding + border.
Nếu bạn muốn tính thêm cả margin, bạn có thể truyền tham số true.

Cú pháp:

js
$(selector).outerWidth(); // Không tính margin
$(selector).outerWidth(true); // Có tính margin

Ví dụ:

html
Thử online
<div id="box5" style="width: 250px; padding: 10px; border: 5px solid purple; margin: 15px;">Box 5</div>

<script>
  $(document).ready(function() {
    let outerWidthWithoutMargin = $("#box5").outerWidth();
    let outerWidthWithMargin = $("#box5").outerWidth(true);
    
    console.log(outerWidthWithoutMargin); // Output: 250 + 10*2 + 5*2 = 280
    console.log(outerWidthWithMargin);    // Output: 280 + 15*2 = 310
  });
</script>

6. Phương thức outerHeight()

outerHeight() trả về chiều cao nội dung + padding + border.
Tương tự, có thể tính thêm margin bằng cách truyền true.

Cú pháp:

js
$(selector).outerHeight(); // Không tính margin
$(selector).outerHeight(true); // Có tính margin

Ví dụ:

html
Thử online
<div id="box6" style="height: 180px; padding: 5px; border: 2px solid orange; margin: 20px;">Box 6</div>

<script>
  $(document).ready(function() {
    let outerHeightWithoutMargin = $("#box6").outerHeight();
    let outerHeightWithMargin = $("#box6").outerHeight(true);
    
    console.log(outerHeightWithoutMargin); // Output: 180 + 5*2 + 2*2 = 194
    console.log(outerHeightWithMargin);    // Output: 194 + 20*2 = 234
  });
</script>

Kết luận

Bộ phương thức Dimensions trong jQuery (width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight()) cực kỳ hữu ích khi bạn cần:

  • Tính toán chính xác kích thước của phần tử trong giao diện.
  • Tạo các layout động, responsive, hoặc tùy chỉnh giao diện người dùng theo tình huống thực tế.

Việc nắm chắc cách mỗi phương thức hoạt động sẽ giúp bạn xây dựng website mượt mà, chuyên nghiệp hơn rất nhiều.