Show Định nghĩa và sử dụng
Cấu trúc.width() Xác định giá trị chiều rộng của thành phần. $('p').width(); .width()Html viết:<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var wDiv = $('div').width();
$('span').text('chiều rộng của thành phần div: ' + wDiv+'px');
});
</script>
</head>
<body>
<div>
</div>
<span></span>
</body>
</html> Hiển thị trình duyệt:<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var wDiv = $('div').width();
$('span').text('chiều rộng của thành phần div: ' + wDiv+'px');
});
</script>
</head>
<body>
<div>
</div>
<span></span>
</body>
</html> 0 cho ta biết thành phần div có giá trị chiều rộng là bao nhiêu.So sánh code HTML trước và sau khi có jQuery:
.width(val)Html viết:<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div { background-color: yellow; }
</style>
<script>
$(function(){
$('div').width(100);
});
</script>
</head>
<body>
<div>
<p>Thành phần p con của div</p>
</div>
</body>
</html> Hiển thị trình duyệt:<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var wDiv = $('div').width();
$('span').text('chiều rộng của thành phần div: ' + wDiv+'px');
});
</script>
</head>
<body>
<div>
</div>
<span></span>
</body>
</html> 0 cho ta biết thành phần div có giá trị chiều rộng là bao nhiêu.So sánh code HTML trước và sau khi có jQuery:
Thiết lập chiều rộng và chiều caoThuộc tính width dùng để thiết lập chiều rộng cho phần nội dung của phần tử.width dùng để thiết lập chiều rộng cho phần nội dung của phần tử. Thuộc tính height dùng để thiết lập chiều cao cho phần nội dung của phần tử.height dùng để thiết lập chiều cao cho phần nội dung của phần tử. Lưu ý: Chiều rộng và chiều cao không bao gồm phần padding, border, margin. Hình ảnh minh họa dưới đây sẽ cho bạn thấy rõ phần nào là chiều rộng, phần nào là chiều cao: Giá trị của thuộc tính width và height có thể xác định theo đơn vị: px, em, % (phần trăm kích thước phần nội dung của phần tử chứa nó)
Xem ví dụ Lưu ý: Nếu ta không thiết lập chiều rộng và chiều cao cho phần tử thì trình duyệt sẽ tự động thiết lập (Nếu là phần tử khối thì nó sẽ có chiều rộng là 100%). Thuộc tính max-widthNếu ta thiết lập chiều rộng cho một phần tử quá dài mà trong khi phần tử chứa nó lại quá ngắn thì sẽ dẫn đến việc phần tử chứa nó tự động tạo một thanh scroll nằm ngang mất thẫm mỹ (Xem ví dụ) Từ đây, thuộc tính max-width được dùng để thiết lập chiều rộng cho phần tử kèm theo tính năng tự động thu hẹp chiều rộng nếu phần tử chứa nó quá ngắn.max-width được dùng để thiết lập chiều rộng cho phần tử kèm theo tính năng tự động thu hẹp chiều rộng nếu phần tử chứa nó quá ngắn. Ví dụ, tôi có phần tử div1 thiết lập width:800px và phần tử div2 thiết lập max-width:800pxphần tử div1 thiết lập width:800px và phần tử div2 thiết lập max-width:800px
Xem ví dụ Giá trị của thuộc tính max-width có thể xác định theo đơn vị: px, em, %, hoặc none (none tức là không thiết lập chiều rộng tối đa). Lưu ý: Thuộc tính max-width sẽ ghi đè lên thuộc tính width. Thuộc tính max-heightThông thường, khi ta thiết lập chiều cao cho một phần tử, mặc cho phần nội dung của nó dài hay ngắn thì chiều cao của phần tử vẫn luôn không thay đổi (Xem ví dụ) Từ đây, thuộc tính max-height dùng để thiết lập chiều cao cho phần tử kèm theo tính năng tự động rút thấp lại hoặc kéo cao ra phụ thuộc vào nội dung của phần tử (nhưng đương nhiên chiều cao của phần tử sẽ không vượt quá giá trị được thiết lập).max-height dùng để thiết lập chiều cao cho phần tử kèm theo tính năng tự động rút thấp lại hoặc kéo cao ra phụ thuộc vào nội dung của phần tử (nhưng đương nhiên chiều cao của phần tử sẽ không vượt quá giá trị được thiết lập).
Xem ví dụ Thuộc tính min-widthThuộc tính min-width dùng để thiết lập chiều rộng cho phần tử tương tự như thuộc tính width, nó cũng sẽ tạo ra một thanh scroll nằm ngang nếu chiều rộng của phần tử chứa nó quá hẹp so với chiều rộng của nó.min-width dùng để thiết lập chiều rộng cho phần tử tương tự như thuộc tính width, nó cũng sẽ tạo ra một thanh scroll nằm ngang nếu chiều rộng của phần tử chứa nó quá hẹp so với chiều rộng của nó. Tuy nhiên, điểm khác nhau giữa hai thuộc tính này là:
Xem ví dụ Thuộc tính min-heightThuộc tính min-height dùng để thiết lập chiều cao tối thiếu cho một phần tử. Nếu nội dung có phần tử đó quá cao thì chiều cao của phần tử sẽ tự động được tăng lên.min-height dùng để thiết lập chiều cao tối thiếu cho một phần tử. Nếu nội dung có phần tử đó quá cao thì chiều cao của phần tử sẽ tự động được tăng lên. Thuộc tính overflowThông thường, nếu kích thước phần nội dung của phần tử lớn hơn chiều rộng hoặc chiều cao của phần tử, thì nội dung đó sẽ bị tràn ra bên ngoài (Xem ví dụ) Để khắc phục tình trạng này, ta có thể sử dụng thuộc tính overflow với giá trị auto (tự tạo thanh scroll cho phần tử đó) hoặc giá trị hidden (ẩn phần bị tràn)overflow với giá trị auto (tự tạo thanh scroll cho phần tử đó) hoặc giá trị hidden (ẩn phần bị tràn)
Xem ví dụ |