வலைப்பக்கத்தின் தளவமைப்பை வடிவமைக்கும்போது உயரம் மற்றும் அகலம் மிகவும் குறிப்பிடத்தக்க அளவுகளாகும்.
'உயரம்' என்பது ஒரு பொருளின் நீளத்தை மேலிருந்து கீழாக அளவிடுவதைக் குறிக்கிறது, அதே நேரத்தில் 'அகலம்' என்பது ஒரு பொருளின் ஒரு பக்கத்திலிருந்து மறுபுறம் எவ்வளவு அகலமானது என்பதைக் குறிக்கிறது. இந்த காரணிகள் சாளரத்தில் ஒரு பொருளின் ஒதுக்கீட்டை சரிசெய்ய உதவுகின்றன. ஜாவாஸ்கிரிப்ட்டில், ' உயரம் 'மற்றும்' அகலம் ” பண்புகள் மேலும் முறையே “உள் உயரம்/உள்அகலம்”, மற்றும் “வெளிப்புறம்” அதாவது “வெளி உயரம்/வெளி அகலம்” என இரண்டு வகைகளாக வகைப்படுத்தப்படுகின்றன.
ஜாவாஸ்கிரிப்டில் உள்ள விண்டோ 'இன்னர்ஹெய்ட்' சொத்தின் குறிக்கோள் மற்றும் வேலை பற்றி இந்த எழுதுதல் விவரிக்கிறது.
ஜாவாஸ்கிரிப்ட்டில் சாளரம் 'உள் உயரம்' சொத்து என்ன செய்கிறது?
' உள் உயரம் இருப்பிடப் பட்டி, கருவிப்பட்டி, மெனு பார் மற்றும் பிறவற்றைத் தவிர்த்து உலாவி சாளரத்தின் வியூபோர்ட் உயரத்தை மீட்டெடுக்கும் “சாளரம்” பொருளுடன் சொத்து தொடர்புடையது. மேலும், கிடைமட்ட ஸ்க்ரோல்பார் சேர்க்கப்பட்டால் அதன் உயரமும் இதில் அடங்கும். இந்தச் சொத்தின் திரும்பிய மதிப்பு 'லேஅவுட் வியூபோர்ட்' என்ற சாளரத்திலிருந்து எடுக்கப்பட்டது, அதாவது வலைப்பக்க உள்ளடக்கத்தைக் காண்பிக்கும் பகுதி.
அடிப்படை தொடரியல்
window.innerHeight அல்லது innerHeight
மேலே உள்ள தொடரியல் படி, ' உள் உயரம் 'சொத்தை நேரடியாக அல்லது 'சாளரம்' பொருளைப் பயன்படுத்தி எளிதாகப் பயன்படுத்தலாம்.
மேலே வரையறுக்கப்பட்ட சொத்தை அதன் அடிப்படை தொடரியல் உதவியுடன் நடைமுறையில் செயல்படுத்துவோம்.
எடுத்துக்காட்டு 1: உலாவி சாளரத்தின் வியூபோர்ட் உயரத்தைத் திரும்ப 'உள்உயர்' சொத்தை சாளரத்தைப் பயன்படுத்துதல்
இந்த உதாரணம், உலாவி சாளரத்தின் வியூபோர்ட் உயரத்தை மீட்டெடுக்க, 'சாளரம்' பொருளுடன் 'innerHeight' பண்பைப் பயன்படுத்துகிறது.
HTML குறியீடு
முதலில், கீழே குறிப்பிடப்பட்டுள்ள குறியீட்டைப் பாருங்கள்:
< h2 > சாளரத்தின் உள் உயர சொத்து h2 >< பொத்தானை கிளிக் செய்யவும் = 'jsFunc()' > உயரம் கிடைக்கும் பொத்தானை >
< ப ஐடி = 'அதற்காக' > ப >
மேலே உள்ள குறியீடு வரிகளில்:
- ' ” குறிச்சொல் நிலை 2 துணைத்தலைப்பை வரையறுக்கிறது.
- ' <பொத்தான்> நிகழ்வு தூண்டப்படும் போது 'jsFunc()' செயல்பாட்டை செயல்படுத்த 'onclick' நிகழ்வைக் கொண்ட பொத்தானைக் குறிச்சொல் குறிக்கிறது.
- ' பயன்படுத்தப்பட்ட 'innerHeight' சொத்தின் திரும்பிய மதிப்பைக் காட்ட, ஒதுக்கப்பட்ட ஐடி 'பாரா' உடன் வெற்றுப் பத்தியை 'குறிச்சொல் சேர்க்கிறது.
ஜாவாஸ்கிரிப்ட் குறியீடு
இப்போது, கீழே கொடுக்கப்பட்டுள்ள குறியீட்டுடன் தொடரவும்:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு jsFunc ( ) {
அனுமதிக்க h = window.innerHeight;
document.getElementById ( 'அதற்காக' ) .innerHTML = 'சாளரத்தின் உள் உயரம்:' + h;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீட்டு வரிகளில்:
- முதலில், 'என்று பெயரிடப்பட்ட ஒரு செயல்பாட்டை வரையறுக்கவும் jsFunc() ”.
- அதன் வரையறையில், 'h' மாறியானது ' உள் உயரம் 'சாளரம்' பொருளைப் பயன்படுத்தும் சொத்து.
- அதன் பிறகு, விண்ணப்பிக்கவும் ' getElementById() 'பாரா' ஐடியைப் பயன்படுத்தி சேர்க்கப்பட்ட வெற்றுப் பத்தியைப் பெறுவதற்கான முறை மற்றும் தற்போதைய உலாவி சாளரத்தின் உள் உயரத்தைக் காண்பிக்கும்.
வெளியீடு
மேலே உள்ள வெளியீட்டில் காட்டப்பட்டுள்ளபடி, தற்போதைய உலாவி சாளரம் வியூபோர்ட் உயரத்தை (உள் உயரம்) காட்டுகிறது, அதாவது, ' 599px 'பொத்தான் கிளிக் செய்தவுடன்.
எடுத்துக்காட்டு 2: ஒருங்கிணைந்த சாளரத்தை 'உள் உயரம்' மற்றும் 'உள் அகலம்' பண்புகளைப் பயன்படுத்துதல்
'உள் அகலம்', 'வெளி அகலம்', 'வெளி உயரம்' போன்ற பிற பரிமாண பண்புகளுடன் 'உள் உயரம்' பண்பு செயல்படுத்தப்படலாம். இந்த சூழ்நிலையில், இது ' உள் அகலம் ”சொத்து.
HTML குறியீடு
மாற்றியமைக்கப்பட்ட HTML குறியீட்டின் கண்ணோட்டத்தைப் பார்ப்போம்:
< h2 > சாளரத்தின் உள் உயரம் மற்றும் உள் அகல பண்புகள் h2 >< பொத்தானை கிளிக் செய்யவும் = 'jsFunc()' > உயரம் மற்றும் அகலம் கிடைக்கும் பொத்தானை >
< ப ஐடி = 'அதற்காக' > ப >
இங்கே, “