Bài viết này trình bày chi tiết về hoạt động của thuộc tính “offsetTop” trong JavaScript.
Thuộc tính HTML DOM “offsetTop” hoạt động như thế nào trong JavaScript?
Các ' bù đắpTop ” thuộc tính hoạt động trên các phần tử HTML và trả về “lề”, “phần đệm”, “đường viền” và “thanh cuộn” trên cùng của phần tử cha của nó.
cú pháp
yếu tố. bù đắpTop
Trong cú pháp này, “ yếu tố ” biểu thị vị trí trên cùng của phần tử HTML cụ thể so với khung nhìn (một vùng trống nơi nội dung trang web hiển thị).
Ghi chú: Giá trị trả về bao gồm:
- vị trí trên cùng và lề của phần tử.
- đường viền trên cùng, thanh cuộn và phần đệm của phần tử gốc.
Hãy sử dụng cú pháp trên một cách thực tế.
Ví dụ: Áp dụng thuộc tính “offsetTop” để đánh giá vị trí hàng đầu của HTML
Ví dụ này sử dụng “ bù đắpTop ” để tính toán vị trí trên cùng của phần tử HTML cụ thể, tức là, “ Đầu tiên, đi qua mã HTML sau: Trong đoạn mã trên: Bây giờ, hãy xem xét mã JavaScript đã cho: Trong các dòng mã trên: đầu ra Trong kết quả này, có thể thấy rằng vị trí trên cùng của div đã cho (bao gồm cả lề), tức là, “ 35px ” được tính theo ghi chú đã chỉ định (ở đầu blog) và hiển thị khi nhấp vào nút. JavaScript cung cấp “ bù đắpTop ” để tính toán vị trí trên cùng của phần tử HTML so với chế độ xem. Nó trả về vị trí trên cùng được tính toán của một phần tử dưới dạng một giá trị nguyên trong “ điểm ảnh ”. Bài viết này đã trình bày mục tiêu, cách sử dụng và triển khai thuộc tính 'offsetTop' của Phần tử DOM HTML trong JavaScript.
Mã HTML
< b > Chi tiết của cái này div là : b >< anh >
đứng đầu : 20px < anh >
chức vụ : liên quan đến < anh >
chữ - căn chỉnh : trung tâm < anh >
lề : 15px < anh >
ranh giới : 3px < anh >
div >< anh >
< nút onclick = 'jsFunc()' > Nhấp vào nó cái nút >
< id = 'vì' > P >
Mã JavaScript
chức năng jsFunc ( ) {
là cây du = tài liệu. getElementById ( 'Div1' ) ;
txt ở đâu = 'OffsetTop được tính toán là:' + cây du. bù đắpTop + 'px
' ;
tài liệu. getElementById ( 'vì' ) . bên trongHTML = txt ;
}
kịch bản >
Phần kết luận