இந்த இடுகை ஜாவாஸ்கிரிப்டில் உள்ள விண்டோ ஆப்ஜெக்ட்டின் 'getComputedStyle()' முறையின் குறிக்கோள், வேலை மற்றும் பயன்பாடு ஆகியவற்றை எழுதுகிறது.
'getComputedStyle()' மெத்தட் ஆஃப் விண்டோ ஆப்ஜெக்ட் ஜாவாஸ்கிரிப்டில் என்ன செய்கிறது?
' getComputedStyle() ” முறையானது CSS பண்புகள் மற்றும் அவற்றின் மதிப்புகளின் தொகுப்பைக் கொண்ட “CSSStyleDeclaration” பொருளை வழங்குகிறது. இது இலக்கு HTML உறுப்பு ஸ்டைலிங் பண்புகளை கணக்கிடுகிறது. கூடுதலாக, HTML தனிமத்தின் குறிப்பிட்ட பகுதியின் ஸ்டைலிங் பண்புகளைக் கணக்கிடுவதில் இது குறிப்பிடத்தக்க பங்கை வகிக்கிறது.
தொடரியல்
ஜன்னல். getComputedStyle ( உறுப்பு , போலி உறுப்பு )
மேலே உள்ள தொடரியல்:
- ஜன்னல்: இது உலாவி சாளரத்தைக் குறிக்கும் உலகளாவிய பொருள்.
- உறுப்பு: இது குறிப்பிட்ட HTML உறுப்பைக் குறிப்பிடுகிறது, அதன் பாணியைக் கணக்கிட வேண்டும்.
- போலி உறுப்பு: இது கொடுக்கப்பட்ட HTML உறுப்பின் பகுதியைக் குறிக்கிறது எ.கா., முதல் எழுத்து, கடைசி எழுத்து போன்றவை.
பின்வரும் பிரிவு எடுத்துக்காட்டுகளின் உதவியுடன் 'getComputedStyle()' முறையின் நடைமுறை விளக்கத்தை வழங்குகிறது.
HTML குறியீடு (CSS ஸ்டைலிங் உட்பட)
முதலில், பின்வரும் HTML குறியீட்டின் மேலோட்டத்தைப் பார்க்கவும்:
< தலை >
< பாணி >
h3{
எழுத்துரு அளவு: 20px;
பின்னணி நிறம்: பச்சை மஞ்சள்
}
< / பாணி >
< / தலை >
< உடல் >
< h2 > GetComputedStyle() விண்டோ ஆப்ஜெக்ட் முறையைப் பயன்படுத்தவும் < / h2 >
< h3 ஐடி = 'டெமோ' > கொடுக்கப்பட்ட HTML உறுப்பின் எழுத்துரு அளவு: < / h3 >
< ப ஐடி = 'மாதிரி' >< / ப >
மேலே உள்ள குறியீட்டு வரிகளில்:
- ' <பாணி> 'குறிச்சொல்' இன் கூறப்பட்ட ஸ்டைலிங்கைப் பயன்படுத்துகிறது HTML உறுப்பு.
- இல் ' <உடல்> 'பிரிவு, ஒரு துணை தலைப்பு சேர்க்கப்பட்டுள்ளது' ”
- அடுத்து, “
” உறுப்பு ஐடியைக் கொண்ட “ டெமோ ” என்பது இரண்டாவது துணைத்தலைப்பைக் குறிப்பிடுகிறது.
- இறுதியாக, ' 'குறிச்சொல் ஒரு ஐடியுடன் ஒரு வெற்றுப் பத்தியைக் குறிக்கிறது' மாதிரி ” இலக்கிடப்பட்ட உறுப்பின் கணக்கிடப்பட்ட CSS பண்புகளைக் காண்பிப்பதற்கு.
குறிப்பு: இந்த இடுகையின் அனைத்து எடுத்துக்காட்டுகளிலும் இந்த HTML குறியீடு பின்பற்றப்படுகிறது.
எடுத்துக்காட்டு 1: HTML உறுப்புகளின் எழுத்துரு அளவைக் கணக்கிடுவதற்கு “getComputedStyle()” முறையைப் பயன்படுத்துதல்
இலக்கு HTML உறுப்பின் எழுத்துரு அளவைப் பெற இந்த எடுத்துக்காட்டு “getComputedStyle()” முறையைப் பயன்படுத்துகிறது.
ஜாவாஸ்கிரிப்ட் குறியீடு
குறிப்பிடப்பட்ட ஜாவாஸ்கிரிப்ட் குறியீட்டைக் கவனியுங்கள்:
< கையால் எழுதப்பட்ட தாள் >நிலையான உறுப்பு = ஆவணம். getElementById ( 'டெமோ' ) ;
நிலையான obj = ஜன்னல். getComputedStyle ( உறுப்பு )
அளவை அனுமதிக்கவும் = obj. பெறு சொத்து மதிப்பு ( 'எழுத்துரு அளவு' ) ;
ஆவணம். getElementById ( 'மாதிரி' ) . உள் HTML = அளவு ;
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- ஒரு மாறியை அறிவிக்கவும் ' உறுப்பு 'கான்ஸ்ட்' முக்கிய வார்த்தையுடன் '' ஐப் பயன்படுத்துகிறது getElementById() '
' உறுப்பை அதன் ஐடி வழியாக அணுகுவதற்கான முறை ' டெமோ ”.
- அதன் பிறகு, விண்ணப்பிக்கவும் ' getComputedStyle() பெறப்பட்ட '
' உறுப்பின் CSS பண்புகளை கணக்கிடுவதற்கான முறை.
- அடுத்து, ' அளவு 'மாறி பொருந்தும்' getPropertyValue() 'பயன்படுத்தப்பட்ட CSS சொத்தின் மதிப்பை வழங்கும் முறை' எழுத்துரு அளவு ” என்று சரமாக.
- கடைசியாக, 'getElementById()' முறையானது வெற்றுப் பத்தியை அணுகி, '' ஐப் பயன்படுத்தி கணக்கிடப்பட்ட CSS சொத்து மதிப்பைக் காட்டுகிறது உள் HTML ”சொத்து.
வெளியீடு
பார்த்தபடி, வெளியீடு தொடர்புடைய HTML உறுப்புக்கு எதிராக பயன்படுத்தப்பட்ட எழுத்துரு அளவு மதிப்பைக் காட்டுகிறது, அதாவது, '
'.
எடுத்துக்காட்டு 2: HTML உறுப்புகளின் பின்னணி நிறத்தைக் கணக்கிடுவதற்கு “getComputedStyle()” முறையைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டில், குறிப்பிட்ட HTML உறுப்பின் பின்னணி நிறத்தைக் கணக்கிட விவாதிக்கப்பட்ட முறை பயன்படுத்தப்படுகிறது:
< கையால் எழுதப்பட்ட தாள் >நிலையான உறுப்பு = ஆவணம். getElementById ( 'டெமோ' ) ;
நிலையான obj = ஜன்னல். getComputedStyle ( உறுப்பு )
bgcolor ஐ விடுங்கள் = obj. பெறு சொத்து மதிப்பு ( 'பின்னணி நிறம்' ) ;
ஆவணம். getElementById ( 'மாதிரி' ) . உள் HTML = bgcolor ;
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு தொகுதியில், ' getComputedStyle() 'முறை கணக்கிடுகிறது' பின்னணி நிறம் '
' உறுப்பின் 'ஐடி 'டெமோ' மற்றும் அதன் மதிப்பை 'rgb' மூலம் ' getPropertyValue() ”முறை.
வெளியீடு
பெறப்பட்ட HTML உறுப்பின் கணக்கிடப்பட்ட பின்னணி நிறத்தை வெளியீடு தெளிவாகக் காட்டுகிறது.
முடிவுரை
ஜாவாஸ்கிரிப்ட் வழங்குகிறது ' getComputedStyle() இலக்கு HTML உறுப்பின் CSS ஸ்டைலிங் பண்புகளைக் கணக்கிடுவதற்கான முறை. இந்த முறையின் கணக்கிடப்பட்ட மதிப்பு என்பது CSS பண்புகள் மற்றும் அவற்றின் மதிப்புகளைக் கொண்ட ஒரு சரம் ஆகும். எந்த HTML உறுப்பின் CSS பண்புகளையும் பெற ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி இது வெவ்வேறு வழிகளில் செயல்படுத்தப்படலாம். இந்த இடுகை ஜாவாஸ்கிரிப்டில் உள்ள விண்டோ ஆப்ஜெக்ட்டின் 'getComputedStyle()' முறையின் குறிக்கோள், வேலை மற்றும் பயன்பாடு பற்றிய விரிவான பார்வையை வழங்கியது.