Người Viết : ViKiMi Editor
Phương Thức Thiết lập / Trả về giá trị Độ Rộng & Chiều Cao của các các Phần tử HTML
Thao tác trên các phần tử HTML làm cho chúng ta chắc chắn hơn về những điều có thể làm với giao diện. Điều này có lẽ là không thừa và nó cũng được nhấn mạnh nhiều với kinh nghiệm lập trình. Dù có thể sử dụng các nền tảng khác nhau, nhưng bạn vẫn cần phải có những thao tác thiết kế mang tính các nhân. Thiết lập hoặc Trả về Width & Height các phần tử HTML cũng cần thiết.
Sử dụng jQuery để Thiết lập / Trả về Width & Height Các phần tử HTML :
+ Điều này giúp bạn có thể tính toán và chủ động đưa ra cách xử lý Width & Height các phần tử HTML
+ Đây cũng là cách nhanh và dễ dàng để bạn làm việc với Width & Height các phần tử HTML
Thư viện jQuery cung cấp những phương thức ngắn gọn để bạn thao tác với Width & Height của các phần tử HTML :
+ Phương thức Width()
Phương thức này cho phép bạn Thiết lập / Trả về độ rộng Các phần tử HTML ( Tuy nhiên, Nó sẽ không bao gồm Padding ; Margin; Border )
+ Phương Thức Height()
Phương Thức này cho phép bạn Thiết lập / Trả về chiều cao Các phần tử HTML ( Tuy nhiên, Nó sẽ không bao gồm Padding ; Margin; Border )
A ] THIẾT LẬP ĐỘ RỘNG / CHIỀU CAO
Sử dụng các phương thức trên để thiết lập Width & Height của các phần tử HTML.
+ Thiết lập Độ rộng / Chiều cao cho Các Thẻ Div
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").width("200em").height("200em");
/** Hoặc
$("div").width(200).height(200);
$("div").width("200px").height("200px");
**/
});
});
</script>
B ] TRẢ VỀ ĐỘ RỘNG / CHIỀU CAO
Sử dụng các phương thức trên để thiết lập Width & Height của các phần tử HTML.
+ Trả về Độ rộng / Chiều cao của Các Thẻ Div
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt1 = "";
txt1 += "Width of div: " + $("#div1").width() + "</br>";
txt1 += "Height of div: " + $("#div1").height();
$("#div1").html( txt1 );
var txt2 = "";
txt2 += "Width of div: " + $("#div2").width() + "</br>";
txt2 += "Height of div: " + $("#div2").height();
$("#div2").html( txt2 );
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
#div2 {
height: 200px;
width: 200px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: darkblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br/>
<div id="div2"></div>
<br/>
<button>Hiển Thị Kích Thước</button>
</body>
</html>
Để lấy về kích thước của các phần tử HTML sử dụng Thư viện jQuery không hề khó khăn. Đây là nhưng phương thức cơ bản giúp làm quen với thao tác về kích thước các phần tử HTML một cách dễ dàng. Để bạn có thể dễ dàng tạo ra các hiệu ứng cũng như các hoạt ảnh dựa vào thư viện jQuery.
+ Phương thức Width()
Thao tác với chiều rộng các phần tử HTML
+ Phương thức Height()
Thao tác với chiều cao các phần tử HTML
Thư viện jQuery có nhiều phương thức khác nhau để thao tác kích thước của các phần tử trên Website.
