இந்தக் கட்டுரை HTML இல் நடைமுறைச் செயலாக்கத்துடன் DOM உறுப்பான “clientTop” ஐ விளக்குகிறது.
HTML இல் DOM உறுப்பு 'clientTop' ஐ எவ்வாறு பயன்படுத்துவது?
'clientTop' பண்பு வலைப்பக்கங்களை உருவாக்கும் போது HTML உறுப்புகளின் தளவமைப்பு மற்றும் பொருத்துதலுடன் வேலை செய்ய பயனுள்ளதாக இருக்கும். பதிலுக்கு இது பதிலளிக்கக்கூடிய மற்றும் மாறும் இணையதள தளவமைப்புகளை உருவாக்க உதவுகிறது
உதாரணமாக
'clientTop' சொத்தை நன்கு புரிந்து கொள்ள ஒரு உதாரணம் இருக்கட்டும். உதாரணமாக, மேல் நிலையில் இருந்து எல்லையின் எடை இந்த எடுத்துக்காட்டில் மதிப்பிடப்படுகிறது:
< உடல் >
< h3 ஐடி = 'உதாரணமாக' > சிறந்த விளக்கத்திற்காக Linuxhint வழங்கிய கட்டுரை < / h3 >
< / உடல் >
முதலில், உள்ளே ' <உடல்> 'குறிச்சொல்லை உருவாக்கு' ” குறிச்சொல்லிட்டு அதற்கு சில போலித் தரவை வழங்கவும். மேலும், ஒரு ஐடியை ஒதுக்கவும் உதாரணமாக ' இதனுடன்.
< பாணி >
#உதாரணமாக {
எல்லை : 2px திட கருப்பு;
திணிப்பு: 10px;
பின்னணி - நிறம் : மெல்லிய சாம்பல் நிறம்;
}
< / பாணி >
அதன் பிறகு, உள்ளே ' <பாணி> 'குறிச்சொல்லைத் தேர்ந்தெடுக்கவும்' உதாரணமாக ஐடி மற்றும் மதிப்பை அமைக்கவும் 2px திட காடுபச்சை 'க்கு' எல்லை ”சொத்து. மேலும், சில அடிப்படை ஸ்டைலிங் பயன்படுத்தவும் ' திணிப்பு 'மற்றும்' பின்னணி நிறம் 'சிறந்த காட்சிப்படுத்தல் நோக்கங்களுக்கான பண்புகள்.
மேலே குறிப்பிடப்பட்ட குறியீட்டைச் செயல்படுத்திய பிறகு, வலைப்பக்கம் இப்படித் தோன்றும்:
div மற்றும் h3 கூறுகள் அடிப்படை ஸ்டைலிங்குடன் இணையப் பக்கத்தில் காட்டப்படுவதை வெளியீடு காட்டுகிறது.
'clientTop' சொத்தை பயன்படுத்தவும்
பயன்படுத்த ' கிளையன்டாப் HTML உறுப்பில் உள்ள சொத்து, பின்வரும் குறியீட்டின் வரிகளை உள்ளே சேர்க்கவும் ” குறிச்சொல். இந்த குறியீடு துணுக்கின் விளக்கம் கீழே விளக்கப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >உதாரணமாக இருந்தது = document.getElementById ( 'உதாரணமாக' ) ;
var மேல் உயரம் = உதாரணம்.clientTop;
console.log ( 'மேல் எல்லை உயரம்:' + மேல் உயரம் + 'px' ) ;
< / கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- முதலில், மாறி ' உதாரணமாக ” என்பது உருவாக்கப்பட்டது, இது தகவலைச் சேமிக்கிறது அல்லது HTML உறுப்புக்கு சில செயல்களைப் பயன்படுத்துகிறது.
- அடுத்து, ' உச்ச உயரம் 'மாறி சேமிக்கிறது' உதாரணமாக ' மாறி ' உடன் சேர்ந்து கிளையன்டாப் ”சொத்து.
- இறுதியில், ' உச்ச உயரம் 'பயன்படுத்தி கன்சோலில் மாறி' console.log() ”முறை.
மேலே உள்ள குறியீடு துணுக்கைச் செயல்படுத்திய பிறகு, கன்சோல் இப்படித் தோன்றும்:
மேல் எல்லையின் உயரம்/எடை தேர்ந்தெடுக்கப்பட்ட உறுப்புகளுக்கு பிக்சல்களில் கன்சோலில் காட்டப்படுவதை மேலே உள்ள வெளியீடு விளக்குகிறது.
முடிவுரை
' கிளையன்டாப் HTML உறுப்புகளின் எல்லைகள் மற்றும் திணிப்பு உட்பட அவற்றின் மொத்த உயரத்தை சொத்து அளவிடுகிறது. 'clientTop' பண்பு, தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கான மேல் நிலையில் இருந்து எல்லை எடையை வழங்குகிறது, இது ஊடாடும் வலைப்பக்கங்களை உருவாக்க உதவுகிறது. HTML இல் DOM உறுப்பு 'clientTop' என்றால் என்ன என்பதை இந்தக் கட்டுரை விளக்கியுள்ளது.