இந்த இடுகை HTML DOM பாணி 'பின்னணிப் படம்' சொத்தின் வேலை மற்றும் பயன்பாட்டைக் குறைக்கிறது.
ஜாவாஸ்கிரிப்ட்டில் HTML DOM ஸ்டைல் “பின்னணிப் படம்” சொத்தை எவ்வாறு பயன்படுத்துவது?
HTML DOM பாணி ' பின்னணி படம் HTML உறுப்பு மற்றும் ஆவணத்தை அதன் பாதையைக் குறிப்பிடுவதன் மூலம் பின்னணி படத்தைச் சேர்ப்பதன் மூலம் தனிப்பயனாக்க சொத்து பயன்படுத்தப்படுகிறது.
தொடரியல் ('பின்னணிப் படம்' சொத்தை அமைத்தல்)
பொருள். பாணி . பின்னணி படம் = 'url('URL')|எதுவுமில்லை|ஆரம்ப|பரம்பரை'மேலே உள்ள தொடரியல் பின்வரும் 'பின்னணிப் படம்' சொத்து மதிப்புகளை ஆதரிக்கிறது:
- url ('URL'): இது விரும்பிய பின்னணி படத்தின் இருப்பிடத்தைக் குறிப்பிடுகிறது.
- எதுவும் இல்லை: இது இயல்புநிலை மதிப்பைக் குறிக்கிறது, அதாவது பின்னணி படம் இல்லை.
- ஆரம்ப: இது உலாவியின் இயல்புநிலை மதிப்பைப் போன்றது.
- மரபுரிமையாக: இது அதன் மூலக்கூறிலிருந்து சொத்தைப் பெறுகிறது.
தொடரியல் ('பின்னணிப் படம்' சொத்தின் URL ஐத் திரும்பப் பெறுகிறது)
பொருள். பாணி . பின்னணி படம்இந்த தொடரியல் சேர்க்கப்பட்ட பின்னணி படத்தின் URL ஐக் கொண்ட சர மதிப்பை வழங்குகிறது.
'பின்னணி இமேஜ்' உடையின் பயன்பாட்டை விளக்க, மேலே வரையறுக்கப்பட்ட தொடரியல்களை நடைமுறையில் பயன்படுத்துவோம்.
எடுத்துக்காட்டு 1: பின்னணி படத்தை அமைக்க 'பின்னணிப் படம்' உடைமையைப் பயன்படுத்தவும்
இந்த உதாரணம் பாணிக்கு பொருந்தும் ' பின்னணி படம் ” ஆவணத்தின் URL ஐக் குறிப்பிடுவதன் மூலம் விரும்பிய பின்புலப் படத்தை அமைப்பதற்கான சொத்து.
HTML குறியீடு
முதலில், கூறப்பட்ட HTML குறியீட்டைப் பாருங்கள்:
< h2 > பயன்படுத்தவும் HTML DOM உடை JavaScript இல் பின்னணி பட சொத்து h2 >
< பொத்தானை கிளிக் செய்யவும் = 'myFunc()' > இங்கே கிளிக் செய்யவும் பொத்தானை >
இந்த குறியீட்டில்:
- ' ” குறிச்சொல், நிலை 2 இன் துணைத் தலைப்பைச் சேர்க்கிறது.
- ' <பொத்தான்> 'குறிச்சொல் இணைக்கப்பட்ட ஒரு பொத்தானை உருவாக்குகிறது' கிளிக் செய்யவும் 'செயல்பாட்டை செயல்படுத்த நிகழ்வு' myFunc() ” என்ற பொத்தானைக் கிளிக் செய்யும்போது.
ஜாவாஸ்கிரிப்ட் குறியீடு
அடுத்து, கொடுக்கப்பட்ட ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பின்பற்றவும்:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு myFunc ( ) {
ஆவணம். உடல் . பாணி . பின்னணி படம் = 'url('./html&css/image.jpg')' ;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில்:
- செயல்பாடு பெயரிடப்பட்டது ' myFunc() ' வரையறுக்கப்படுகிறது.
- அதன் வரையறையில், ' பாணி.பின்னணி படம் 'சொத்து குறிப்பிடப்பட்டதைப் பொருந்தும்' URL ” படம் முழு ஆவணத்தின் பின்னணியில் உள்ளது.
வெளியீடு
பொத்தானைக் கிளிக் செய்வதன் மூலம் முழு ஆவணத்திலும் பின்னணி படம் சேர்க்கப்படுவதை வெளியீடு காட்டுகிறது.
எடுத்துக்காட்டு 2: பின்னணி படத்தின் URL ஐத் திரும்பப் பெற, 'பின்னணிப் படம்' உடைமையைப் பயன்படுத்தவும்
' பின்னணி படம் 'பின்னணி படத்தின் URL ஐத் திருப்பித் தருவதற்கும் பண்பு நன்மை பயக்கும். அதை நடைமுறையில் பார்க்கலாம்.
HTML குறியீடு
முதலில், எழுதப்பட்ட HTML குறியீட்டைப் பார்க்கவும்:
< h2 > பயன்படுத்தவும் HTML DOM உடை JavaScript இல் பின்னணி பட சொத்து h2 >< div ஐடி = 'myDiv' பாணி = 'உயரம்: 500px; அகலம்: 500px;
எல்லை: 3px திட கருப்பு;பின்னணி-படம்:url('./html&css/image.jpg')' > இது ஒரு div உள்ளது div >
< h4 ஐடி = 'டெமோ' > h4 >
மேலே உள்ள குறியீடு தொகுதியில்:
- ' பின்னணி படம் கொடுக்கப்பட்ட URL உடன் தொடர்புடைய பின்னணி படத்தைச் சேர்க்கும் '' உறுப்பில் 'பண்பு பயன்படுத்தப்படுகிறது.
- ' 'உறுப்பு நிலை 4 இன் வெற்று துணைத் தலைப்பை உருவாக்குகிறது, இது சேர்க்கப்பட்ட பின்னணி படத்தின் திரும்பிய மதிப்பைக் (URL) காட்டுகிறது.
ஜாவாஸ்கிரிப்ட் குறியீடு
இப்போது, ஜாவாஸ்கிரிப்ட் குறியீட்டிற்குச் செல்லவும்:
< கையால் எழுதப்பட்ட தாள் >
img விடுங்கள் = ஆவணம். getElementById ( 'myDiv' ) . பாணி . பின்னணி படம் ;
ஆவணம். getElementById ( 'டெமோ' ) . உள் HTML = img ;
கையால் எழுதப்பட்ட தாள் >இந்த குறியீடு தொகுதியில்:
- மாறியை அறிவிக்கவும் ' img 'அது பயன்படுத்துகிறது' document.getElementById() '' உறுப்பை அதன் ஐடியான 'myDiv' வழியாக அணுகும் முறை மற்றும் '' வழியாக பின்னணி படத்தைப் பயன்படுத்துகிறது. பின்னணி படம் ”சொத்து.
- அடுத்து, 'document.getElementById()' முறையானது அதன் ஐடி 'டெமோ' ஐப் பயன்படுத்தி, இணைக்கப்பட்ட பின்னணி படத்தின் URL ஐக் காண்பிக்க, வெற்று உபதலைப்பைப் பெறுகிறது.
வெளியீடு
வெளியீடு 'div' உறுப்புக்கு பயன்படுத்தப்படும் பின்னணி படத்தின் URL ஐக் காட்டுகிறது.
முடிவுரை
ஜாவாஸ்கிரிப்ட் பாணியைப் பயன்படுத்துகிறது ' பின்னணி படம் ” விரும்பிய HTML உறுப்புக்கு பின்னணி படத்தை ஒதுக்க அல்லது அதன் URL ஐ திருப்பி அனுப்புவதற்கான சொத்து. 'ஆரம்ப', 'பரம்பரை', 'URL' மற்றும் 'இல்லை' உள்ளிட்ட பின்னணி படத்தை அமைக்க இது நான்கு சொத்து மதிப்புகளை ஆதரிக்கிறது. இருப்பினும், பின்னணி படத்தின் URL ஐப் பெறுவதற்கான எந்த மதிப்பையும் இது ஆதரிக்காது. இந்த இடுகை ஜாவாஸ்கிரிப்டில் HTML DOM பாணி 'பின்னணிப் படம்' பண்புகளைப் பயன்படுத்துவதற்கான சுருக்கமான விளக்கத்தை வழங்கியது.