Cao
Bé nhỏ
nhỏ hơn
nhỏ nhất
chiều cao var = 100; . một ["click", function[] { $[ this ]. chiều cao[ chiều cao ]. addClass["mod" ];Phương thức height[] xác định hoặc trả về chiều cao của các phần tử được chỉ định. Trong khi sử dụng một phương thức như vậy để trả về chiều cao, thì chiều cao của phần tử phù hợp FIRST trả về và khi sử dụng một phương thức như vậy để đặt chiều cao, chiều cao của tất cả các phần tử phù hợp sẽ được đặt. Phương thức chiều cao [] của jQuery được ưu tiên khi tính toán toán học liên quan đến việc sử dụng chiều cao của một phần tử. Cách tiếp cận như vậy cũng có thể xác định chiều cao của cửa sổ và tài liệu. Khi phần tử hoặc cha của nó bị ẩn, giá trị được chỉ định bởi phương thức height[] không được đảm bảo là chính xác. Xác minh phần tử đáng chú ý trước khi sử dụng phương thức height[] để có kết quả chính xác
Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]
Giá bán
Xem các khóa học
Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 [85.952 xếp hạng]
cú pháp
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
$[selector].height []Nó được sử dụng để trả về chiều cao cho phần tử
$[selector].height[value]Nó được sử dụng để đặt chiều cao cho phần tử cụ thể
$[selector].height [function [index, currentheight]]Nó được sử dụng để đặt chiều cao cho phần tử cụ thể bằng hàm
Thông số và Mô tả
- giá trị. Nó là một tham số bắt buộc để thiết lập chiều cao của một phần tử. Chiều cao có thể được chỉ định trong px, em, pt. Đơn vị mặc định là px
- hàm [chỉ mục, chiều cao hiện tại]. Đây là một tham số tùy chọn chỉ định một hàm cung cấp chiều cao mới của các phần tử được chọn
- mục lục. Nó trả về vị trí chỉ mục của phần tử đã chọn trong tập hợp đã cho
- chiều cao hiện tại. Nó trả về chiều cao hiện tại của phần tử được chọn trong tập hợp đã cho
Lợi ích của chiều cao [] Phương pháp
- Nó có thể được sử dụng khi chiều cao của một phần tử là cần thiết trong một phép tính toán học
- Nó trả về chiều cao của nội dung bất kể giá trị của thuộc tính kích thước hộp CSS
Làm việc với jQuery height[] Method
jQuery giúp bạn dễ dàng làm việc với kích thước của các phần tử và thậm chí cả cửa sổ trình duyệt bằng cách sử dụng phương thức height[] để tìm kích thước hoặc cách khác là chiều rộng bên trong hoặc chiều cao bên trong hoặc chiều rộng bên ngoài hoặc chiều cao bên ngoài tùy thuộc vào số đo bạn . Chiều cao của phần tử sẽ đơn giản hóa kích thước tính toán của phần tử. Phương thức height[] của jQuery sẽ đặt kích thước mới cho một phần tử, chỉ bằng cách đưa ra một tham số với giá trị mới
Ví dụ về chiều cao jQuery[]
Dưới đây là các ví dụ về jQuery height[]
Ví dụ 1
Mã số
jQuery height[] method
body {
background: grey;
}
button {
font-size: 10px;
margin: 4px;
}
p {
width: 150px;
border: 1px green solid;
}
div {
color: cyan;
font-weight: bold;
}
Click on below buttons to get various types heights ...
Click here to get height of the paragraph
Click here to get height of the Document
Click here to get height of the window
function showHeight[ element, height ] {
$[ "div" ].text[ "The height for the " + element + " is " + height + "px." ];
}
$[ "#para_hgt" ].click[function[] {
showHeight[ "paragraph", $[ "p" ].height[] ];
}];
$[ "#doc_hgt" ].click[function[] {
showHeight[ "document", $[ document ].height[] ];
}];
$[ "#wind_hgt" ].click[function[] {
showHeight[ "window", $[ window ].height[] ];
}];
đầu ra
Như trong hình trên, khi bạn nhấp vào từng nút, bạn sẽ nhận được chiều cao của đoạn văn, tài liệu và cửa sổ
Ví dụ #2
Mã số
jQuery height[] method
$[document].ready[function[]{
function showHeight[element, hgt] {
alert[ hgt + "px."];
}
$["p"].click[function [] {
showHeight["paragraph", $["p"].height[]];
}];
}];
Hello World ...
EDUCBA
đầu ra
Ở kết quả trên, khi bạn nhấp vào văn bản, nó sẽ hiển thị cỡ chữ của phần tử trong hộp cảnh báo
Ví dụ #3
Mã số
jQuery height[] method
div {
width: 40px;
height: 80px;
float: left;
margin: 8px;
background: rgb[255,140,0];
cursor: pointer;
}
$[ "div" ].one[ "click", function[] {
$[ this ].height[ 40 ].css[{
cursor: "auto",
backgroundColor: "grey"
}];
}];
đầu ra
Ví dụ #4
Mã số
jQuery height[] method
$[document].ready[function[]{
$["button"].click[function[]{
$["div"].height[function[n,c]{
return c+100;
}];
}];
}];
Click on the button to increase the height of the div
đầu ra
Ví dụ #5
Mã số
jQuery height[] method
$[document].ready[function[] {
$["button"].click[function[] {
var msg = "";
msg += "The inner height of div element is : " + $["#hgt_demo"].
innerHeight[] + "";
$["#hgt_demo"].html[msg];
}];
}];
#hgt_demo {
height: 160px;
width: 330px;
padding: 15px;
margin: 2px;
border: 1px solid blue;
background-color: green;
}
Click Here..
Click on the above button to check the inner height of an element..
đầu ra
Ở đầu ra, khi bạn nhấp vào nút, nó sẽ hiển thị chiều cao bên trong của phần tử trên trang
Ví dụ #6
Mã số
________số 8_______đầu ra
Ở đầu ra, khi bạn nhấp vào nút, nó sẽ hiển thị chiều cao của phần tử trên trang
Phần kết luận
Cho đến nay, chúng ta đã thấy phương thức có sẵn của jQuery được gọi là height[] để đo chiều cao của một phần tử. Nhưng điều đó sẽ không kiểm tra phần đệm, đường viền và lề của phần tử. Hãy nhớ rằng chiều cao[giá trị] đặt chiều cao nội dung của hộp bất kể giá trị kích thước hộp CSS của thuộc tính. Khi bạn đang sử dụng giá trị cho chiều cao [], thì giá trị đó có thể là một chuỗi hoặc một số nguyên. Nếu chỉ có một số trong giá trị, thì jQuery sẽ giả định một đơn vị pixel
Bài viết được đề xuất
Đây là hướng dẫn về chiều cao jQuery[]. Ở đây chúng ta thảo luận về hoạt động của Phương thức jQuery height[] và các ví dụ của nó cùng với việc triển khai mã của nó. Bạn cũng có thể xem qua các bài viết được đề xuất khác của chúng tôi để tìm hiểu thêm –