Thật không may, không thể "có được" chiều cao của một phần tử thông qua CSS vì CSS không phải là ngôn ngữ trả về bất kỳ loại dữ liệu nào ngoài các quy tắc cho trình duyệt để điều chỉnh kiểu dáng của nó.
Độ phân giải của bạn có thể đạt được với jQuery, hoặc thay vào đó, bạn có thể giả mạo nó với quy tắc transform:translateY[];
của CSS3.
Tuyến đường CSS
Nếu chúng tôi cho rằng div mục tiêu của bạn trong trường hợp này cao 200px - điều này có nghĩa là bạn muốn div có biên độ 190px?
Điều này có thể đạt được bằng cách sử dụng các CSS sau:
.dynamic-height {
-webkit-transform: translateY[100%]; //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
transform: translateY[100%]; //if your div is 200px, this will move it down by 200px, if it is 100px it will down by 100px etc
margin-top: -10px;
}
Trong trường hợp này, điều quan trọng cần nhớ là translateY[100%]
sẽ di chuyển phần tử được đề cập xuống trên tổng số chiều dài của nó.
Vấn đề với tuyến đường này là nó sẽ không đẩy phần tử bên dưới nó ra khỏi đường, nơi có biên độ.
Tuyến đường jQuery
Nếu giả mạo, nó sẽ không hoạt động cho bạn, thì đặt cược tốt nhất tiếp theo của bạn sẽ là triển khai tập lệnh jQuery để thêm CSS chính xác cho bạn.
jQuery[document].ready[function[$]{ //wait for the document to load
$['.dynamic-height'].each[function[]{ //loop through each element with the .dynamic-height class
$[this].css[{
'margin-top' : $[this].outerHeight[] - 10 + 'px' //adjust the css rule for margin-top to equal the element height - 10px and add the measurement unit "px" for valid CSS
}];
}];
}];
Có nhiều tính chất có thể được sử dụng để xác định chiều cao/chiều rộng của các phần tử, nhưng có thể khó quyết định loại nào phù hợp cho một tình huống cụ thể. Tuy nhiên, bạn không thể có được chiều cao của một phần tử chỉ bằng CSS. Trong hướng dẫn này, chúng tôi sẽ chỉ ra cách bạn có thể làm điều này với sự giúp đỡ của jQuery.
Phương pháp đầu tiên là sử dụng thuộc tính OffSetheight. Đây là một thuộc tính chỉ đọc trả về chiều cao của một phần tử trong các pixel, bao gồm đường viền, đệm và thanh cuộn.offsetHeight property. It is a read-only property that returns the height of an element in pixels, including border, padding, and scrollbar.
Chúng tôi sẽ sử dụng cú pháp sau trong ví dụ của chúng tôi:
Ví dụ về việc có được chiều cao của một phần tử bằng cách sử dụng thuộc tính OffSetheight:
Title of the document
body {
text-align: center;
}
h2 {
color: #8ebf42;
}
.box {
height: 110px;
width: 110px;
background-color: #8ebf42;
display: inline-block;
}
W3Docs
Get the height of the element
Click on the button to get the height of the element
Height of the div:
Get Height
function getHeight[] {
divElement = document.querySelector[".box"];
elemHeight = divElement.offsetHeight;
document.querySelector[".output"]
.textContent = elemHeight + "px";
}
Phương pháp thứ hai là sử dụng thuộc tính ClientHeight. Đây là một thuộc tính chỉ đọc trả về chiều cao của một phần tử trong pixel, bao gồm cả đệm.clientHeight property. It is a read-only property that returns the height of an element in pixels, including padding.
Chúng tôi sẽ sử dụng cú pháp sau trong ví dụ tiếp theo của chúng tôi:
Ví dụ về việc có được chiều cao của một phần tử bằng thuộc tính ClientHeight:
Title of the document
body {
text-align: center;
}
h2 {
color: #8ebf42;
}
.box {
height: 110px;
width: 110px;
background-color: #8ebf42;
display: inline-block;
}
W3Docs
Get the height of the element
Click on the button to get the height of the element
Height of the div:
Get Height
function getHeight[] {
divElement = document.querySelector[".box"];
elemHeight = divElement.clientHeight;
document.querySelector[".output"]
.textContent = elemHeight + "px";
}
Chúng ta cũng có thể sử dụng các phương thức JQuery High [] và Width [] để có được chiều cao và chiều rộng của phần tử. Chiều cao và chiều rộng này không bao gồm đường viền, đệm và lề.
Hãy để xem cách chúng ta có thể trả về chiều cao và chiều rộng của một phần tử.
Ví dụ về việc có được chiều cao và chiều rộng của một phần tử bằng phương pháp chiều cao [] và chiều rộng []:
Title of the document
#box {
width: 300px;
height: 200px;
padding: 25px;
text-align: justify;
border: 10px solid #c6b51a;
background: #f0e68c;
margin: 15px;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.
Get Width and Height
$[document]
.ready[function[] {
$["button"]
.click[function[] {
var divWidth = $["#box"]
.width[];
var divHeight = $["#box"]
.height[];
$["#result"]
.html["Width: " + divWidth + ", " + "Height: " + divHeight];
}];
}];
Các phương thức jQuery innerHeight [] và bên trong [] có chiều cao và chiều rộng bên trong của một phần tử. Chiều cao và chiều rộng bên trong bao gồm đệm.
Ví dụ về việc có được chiều cao và chiều rộng của một phần tử bằng các phương thức bên trong [] và bên trong []:] Các phương thức:
Title of the document
#box {
width: 280px;
height: 170px;
padding: 20px;
text-align: justify;
border: 10px solid #795d80;
background: #a997ad;
margin: 15px;
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Get innerWidth and innerHeight
$[document]
.ready[function[] {
$["button"]
.click[function[] {
var divWidth = $["#box"]
.innerWidth[];
var divHeight = $["#box"]
.innerHeight[];
$["#result"]
.html["Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight];
}];
}];
Các phương thức JQuery OuterHeight [] và Outerwid [] có chiều cao và chiều rộng bên ngoài. Chiều cao và chiều rộng bên ngoài này có được chiều cao và chiều rộng bên ngoài của một phần tử. Chiều cao và chiều rộng bên ngoài bao gồm đệm và đường viền.
Ví dụ về việc có được chiều cao và chiều rộng của một phần tử bằng các phương thức bên ngoài [] và các phương thức bên ngoài []:
Title of the document
#box {
width: 280px;
height: 170px;
padding: 20px;
text-align: justify;
border: 10px solid #795d80;
background: #a997ad;
margin: 15px;
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Get outerWidth and outerHeight
$[document]
.ready[function[] {
$["button"]
.click[function[] {
var divWidth = $["#box"]
.outerWidth[];
var divHeight = $["#box"]
.outerHeight[];
$["#result"]
.html["Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight];
}];
}];