Người Viết : ViKiMi Editor
Sử dụng các phương thức tính toán kích thước của Phần Tử HTML để thiết kế giao diện
Khi thiết kế Website luôn luôn cần tính toán kích thước các phần tử. Tuy nhiên cũng cần nhớ một điều là kích thước các phần tử của một Website sẽ khác biệt nhiều hơn. Nguyên nhân kích thước các phần tử của một giao diện Website sẽ bao gồm các yếu tố : Margin ; Padding ; Border ; Width ; Height. Điều này khiến các tính toán về thiết kế giao diện có thể sẽ khác.
Vậy kích thước các phần tử trên giao diện Website sẽ bao gồm :
+ Height : Chiều cao phần tử
+ Width : Độ rộng phần tử
+ Margin : Phần lề của phần tử
+ Padding : Phần đệm của phần tử
Dựa vào các yếu tố cơ bản này chúng ta sẽ có thể đưa ra các tính toán phù hợp. Những phần trước đã sử dụng phương thức width và height.
Để bổ sung thì cần phải có những phương thức cho phép tính toán dựa trên giá trị của Margin & Padding. Những giá trị này sẽ giúp cho Phần tử HTML sẽ được định vị chính xác trên giao diện. Chúng ta có thể sử dụng thiết lập này để chủ động thiết kế.
Hình Ảnh :
A ] PHƯƠNG THỨC InnerWidth() && InnerHeight()
+ Phương thức InnerWidth() :
Trả về độ rộng của một phần tử bao gồm cả phần đệm
Giá trị trả về = Độ rộng phần tử + ( 2 x Padding )
Điều này có nghĩa là sẽ bao gồm cả Padding-Left & Padding-Right
+ Phương thức InnerHeight() :
Trả về chiều cao của một phần tử bao gồm cả phần đệm
Giá trị trả về = Chiều cao phần tử + ( 2 x Padding )
Điều này có nghĩa là sẽ bao gồm cả Padding-Top & Padding-Bottom
B ] PHƯƠNG THỨC OuterWidth() && OuterHeight()
+ Phương thức OuterWidth() :
Trả về độ rộng của một phần tử bao gồm cả Phần đệm + Đường viền
Giá trị trả về = Độ rộng phần tử + ( 2 x Padding ) + ( 2 x Border )
Điều này có nghĩa là sẽ bao gồm cả Padding-Left & Padding-Right
Border-Left & Border-Right
+ Phương thức OuterHeight() :
Trả về chiều cao của một phần tử bao gồm cả Phần đệm + Đường viền
Giá trị trả về = Chiều cao phần tử + ( 2 x Padding ) + ( 2 x Border )
Điều này có nghĩa là sẽ bao gồm cả Padding-Top & Padding-Bottom
Border-Top & Border-Bottom
C ] PHƯƠNG THỨC OuterWidth( True ) && OuterHeight( True )
+ Phương thức OuterWidth( True ) :
Trả về độ rộng của một phần tử bao gồm cả Phần đệm + Đường viền + Lề
Giá trị trả về = Độ rộng phần tử + ( 2 x Padding ) + ( 2 x Border ) + ( 2 x Margin )
Điều này có nghĩa là sẽ bao gồm cả Padding-Left & Padding-Right
Border-Left & Border-Right & Margin-Left & Margin-Right
+ Phương thức OuterHeight( True ) :
Trả về chiều cao của một phần tử bao gồm cả Phần đệm + Đường viền + Lề
Giá trị trả về = Chiều cao phần tử + ( 2 x Padding ) + ( 2 x Border ) + ( 2 x Margin )
Điều này có nghĩa là sẽ bao gồm cả Padding-Top & Padding-Bottom
Border-Top & Border-Bottom & Margin-Top & Margin-Bottom
NHƯ VẬY, Dựa vào những công thức tính toán trên đây bạn có thể dễ dàng dùng các cách tính toán khác nhau và phương thức CSS() để thiết lập các thuộc tính chính xác. Dựa vào công thức CSS() sẽ có thể thiết lập giá trị thuộc tính cho các phần tử HTML.
Những công thức được cung cấp bởi jQuery rất hữu ích khi lập trình.
+ Trên đây là những công thức tính kích thước của phần tử
