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:
$(selector).width(); // Lấy chiều rộng
$(selector).width(value); // Thiết lập chiều rộngvalue: giá trị chiều rộng (số hoặc chuỗi, ví dụ"200px").
Ví dụ:
<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:
$(selector).height(); // Lấy chiều cao
$(selector).height(value); // Thiết lập chiều caoVí dụ:
<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:
$(selector).innerWidth();Ví dụ:
<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:
$(selector).innerHeight();Ví dụ:
<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:
$(selector).outerWidth(); // Không tính margin
$(selector).outerWidth(true); // Có tính marginVí dụ:
<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:
$(selector).outerHeight(); // Không tính margin
$(selector).outerHeight(true); // Có tính marginVí dụ:
<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.
0 Bình luận