.width()

Định nghĩa và sử dụng

.width() xác định hoặc gán giá trị chiều rộng (width) cho thành phần.
.width() được ứng dụng nhiều trong việc xác định chiều rộng màn hình window, hoặc chiều rộng thành phần, cần nhiều trong thiết kế responsive.

Cấu trúc

Xác định giá trị chiều rộng của thành phần.

$('p').width();

.width(Giá trị)

Gán giá trị chiều rộng cho thành phần.

$('p').width(100);

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

Làm thử!

$('div').width() 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:

Trước khi có jQuery	Sau khi có jQuery
<div> <p>Thành phần p con của div</p> </div> <span></span>	<div> <p>Thành phần p con của div</p> </div> <span>chiều rộng của thành phần div: 656px</span>

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

Làm thử!

$('div').width(100) sẽ giúp gán chiều rộng cho thành phần div 100px.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<div> <p>Thành phần p con của div</p> </div>	<div style="width: 100px;"> <p>Thành phần p con của div</p> </div>

.height()

.fadeIn()