Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .outerWidth() trong jQuery
Previous Lesson Next Lesson

.outerWidth() trong jQuery

Định nghĩa và sử dụng .outerHeight() trong jQuery

.outerHeight(): Lấy giá trị chiều cao của thành phần phù hợp, chiều cao này bao gồm border, padding. .outerHeight(true): sẽ cộng thêm thành phần margin nếu có thêm tùy chọn "true".

43image-24

Cấu trúc .outerHeight() trong jQuery

Đã được thêm vào từ phiên bản 1.2.6

.outerHeight()

$('p').outerHeight();
.outerHeight(Tùy chọn margin)

Chiều cao được tính cho cả margin.

$('p').outerHeight(true);

.outerHeight()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
ul {
    border: 4px solid blue;
    height: 60px;
    padding: 10px;
    margin: 5px;
    width: 200px;
}
</style>
<script>
$(function(){
    var ulHeight = $('ul').outerHeight();
    $('span').text(ulHeight);
});
</script>
</head>

<body>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
<p>Thành phần ul cao: <span></span> px</p>
</body>
</html>

Hiển thị trình duyệt:

Khi sử dụng .outerHeight() ta đã lấy được giá trị chiều cao của ul, chiều cao này bao gồm padding, border.

.outerHeight(Tùy chọn margin)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
ul {
    border: 4px solid blue;
    height: 60px;
    padding: 10px;
    margin: 5px;
    width: 200px;
}
</style>
<script>
$(function(){
    var ulHeight = $('ul').outerHeight(true);
    $('span').text(ulHeight);
});
</script>
</head>

<body>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
<p>Thành phần ul cao: <span></span> px</p>
</body>
</html>

Hiển thị trình duyệt:

Khi sử dụng .outerHeight() ta đã lấy được giá trị chiều cao của ul, chiều cao này bao gồm padding, border và margin.

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With