HTML DOM Element offsetTop 属性
- పైన పేజీ offsetParent
- తదుపరి పేజీ outerHTML
- పైకి తిరిగి వెళ్ళు హెచ్టిఎంఎల్ డొమ్ ఇలమెంట్స్ ఆబ్జెక్ట్
定义和用法
offsetTop
属性返回相对于父级的顶部位置(以像素计)。此属性是只读的。
返回值包括:
- 元素的顶部位置和外边距
- 父的顶部内边距、滚动条和边框
మరింత చూడండి:CSS ఫ్రేమ్ మోడల్ పాఠ్యం
offsetParent
అన్ని బ్లాక్ స్టేజ్ అంశాలు సమాచారం పైన ఉన్న అస్థిర స్థానానికి సంబంధించిన సమాచారాన్ని ప్రచురించుతాయి:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
సమాచారం పైన ఉన్న అత్యంత సమానమైన అస్థిర స్థానం ఉన్న పూర్వీకం అని అర్థం చేసుకోండి.
ఏది లేకపోయినట్లయితే, సమాచారం డాక్యుమెంట్ ప్రధాన పాఠానికి సంబంధించినది.
మరింత చూడండి:
ఉదాహరణ
ఉదాహరణ 1
మీ "myDIV" యొక్క offsetTop స్థానాన్ని పొందండి:
const element = document.getElementById("myDIV"); let pos = element.offsetTop;
ఉదాహరణ 2
మీ "myDIV" యొక్క స్థానాన్ని పొందండి:
const element = document.getElementById("test"); Let pos1 = element.offsetTop; let pos2 = element.offsetLeft;
ఉదాహరణ 3
స్టికీ నేవిగేషన్ బార్కు సృష్టించండి:
// నేవిగేషన్ బార్కు ను పొందండి const navbar = document.getElementById("navbar"); // నేవిగేషన్ బార్కు యొక్క ఆఫ్సెట్ పోసిషన్ పొందండి const sticky = navbar.offsetTop; // మీరు స్క్రాల్ పోసిషన్ వచ్చినప్పుడు, sticky క్లాస్ ను నేవిగేషన్ బార్కు కు జోడించండి. స్క్రాల్ పోసిషన్ బయటకు వెళ్ళినప్పుడు, sticky క్లాస్ ను తొలగించండి. function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } navbar.classList.remove("sticky"); } }
సంకేతపదం
టాప్ ఆఫ్సెట్ పోసిషన్ తిరిగి ఇవ్వబడుతుంది:
element.offsetTop
తిరిగి ఇవ్వబడే విలువ
రకం | వివరణ |
---|---|
సంఖ్య | ఎల్లా బ్రౌజర్లు ఈ విషయాన్ని మద్దతు ఇస్తాయి పిక్సెల్లలో ఎలిమెంట్ టాప్ పోసిషన్ |
బ్రౌజర్ మద్దతు
అన్ని బ్రౌజర్లు ఈ విషయాన్ని మద్దతు ఇస్తాయి element.offsetTop
ఉంది:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
మద్దతు | మద్దతు | మద్దతు | మద్దతు | మద్దతు | మద్దతు |
- పైన పేజీ offsetParent
- తదుపరి పేజీ outerHTML
- పైకి తిరిగి వెళ్ళు హెచ్టిఎంఎల్ డొమ్ ఇలమెంట్స్ ఆబ్జెక్ట్