ஜாவாஸ்கிரிப்ட்டில் பின்னணி படத்தை மாற்றுவது எப்படி

ஜாவாஸ்கிரிப்டில், கவர்ச்சிகரமான தளவமைப்பு தேவைப்படும் இணையப் பக்கங்கள் உள்ளன, அதாவது இருண்ட பின்னணிகள் பொதுவாக இடைமுகங்களுக்கு சிறப்பாகச் செயல்படும். இதேபோல், வெள்ளை பின்னணிகள் வாசகர்களை உள்ளடக்கத்தில் கவனம் செலுத்த அனுமதிக்கின்றன, எனவே செய்தி இணையதளங்கள் அல்லது வலைப்பதிவுகள் இருண்ட உரையுடன் ஒப்பீட்டளவில் ஒளி பின்னணியைப் பயன்படுத்துகின்றன. இதுபோன்ற சந்தர்ப்பங்களில், ஆவண வடிவமைப்பை வடிவமைப்பதிலும் மேம்படுத்துவதிலும் ஜாவாஸ்கிரிப்ட் மிகவும் எளிது.

ஜாவாஸ்கிரிப்ட்டில் பின்னணி படத்தை மாற்றுவதற்கான முறைகள் பற்றி இந்த கட்டுரை விவாதிக்கும்.

ஜாவாஸ்கிரிப்ட்டில் பின்னணி படத்தை மாற்றுவது எப்படி?

JavaScript இல் பின்னணி படத்தை மாற்ற, பின்வரும் அணுகுமுறைகளைப் பயன்படுத்தலாம்:

• ' பின்னணி படம் 'சொத்து' DOM ”.
• ' getElementById() 'முறை மற்றும்' பின்னணி படம் 'சொத்து' பத்தி ”.

விவாதிக்கப்பட்ட முறைகளை ஒவ்வொன்றாகப் பார்க்கவும்!

முறை 1: DOM இல் பின்னணி படப் பண்புகளைப் பயன்படுத்தி JavaScript இல் பின்னணி படத்தை மாற்றவும்.

' பின்னணி படம் 'சொத்து குறிப்பிட்ட உறுப்பின் பின்னணி படத்தை சரிசெய்கிறது. இந்த நுட்பத்தை பின்னணி படப் பண்புகளைப் பயன்படுத்துவதன் மூலமும், அதன் பாதையை ஒரு வாதமாகக் கண்டறிவதன் மூலம் பின்னணி படத்தைக் குறிப்பிடுவதன் மூலமும் பயன்படுத்தலாம்.

தொடரியல்

மேலே உள்ள தொடரியல், “ URL ” என்பது படத்தின் பாதையைக் குறிக்கிறது.

விளக்கத்திற்கு பின்வரும் உதாரணத்தைப் பாருங்கள்.

உதாரணமாக

இந்த எடுத்துக்காட்டில், குறிப்பிட்ட மதிப்புடன் ஒரு பொத்தான் சேர்க்கப்படும் மற்றும் ' கிளிக் செய்யவும் ” நிகழ்வு திசைதிருப்புதல் a
செயல்பாடு பின்னணிபடம்():

இப்போது, ​​ஒரு செயல்பாடு ' பின்னணி படம்() ' அறிவிக்கப்படும் மற்றும் ' document.body.style.backgroundImage ” பண்பு அதன் வாதத்தில் குறிப்பிட்ட பட பாதையைப் பயன்படுத்தி பின்னணி படத்தை அணுகும்:

மேலே உள்ள செயலாக்கத்தின் வெளியீடு பின்வருமாறு விளைவிக்கும்:

முறை 2: getElementById() முறை மற்றும் பத்தியில் பின்னணி பட சொத்தை பயன்படுத்தி JavaScript இல் பின்னணி படத்தை மாற்றவும்

' getElementById() 'முறையானது ஒரு குறிப்பிட்ட மதிப்புடன் ஒரு உறுப்பை வழங்குகிறது மற்றும் ' பின்னணி படம் ”பண்பு, மேலே கூறியது போல், அதன் வாதத்தில் குறிப்பிடப்பட்ட குறிப்பிட்ட உறுப்பின் பின்னணி படத்தை வழங்குகிறது. குறிப்பிட்ட பத்தியின் பின்னணியில் குறிப்பிட்ட வண்ணத்தை வரைபடமாக்க இந்த முறையைப் பயன்படுத்தலாம்.

தொடரியல்

இங்கே,' உறுப்புகள் ” என்பது ஒரு தனிமத்தின் ஐடியைக் குறிக்கிறது.

கூறப்பட்ட கருத்தை நன்கு புரிந்து கொள்ள பின்வரும் உதாரணத்தைப் பார்க்கவும்.

உதாரணமாக

முதலில்,

குறிச்சொல்லில் ஒரு பத்தியைச் சேர்த்து, அதற்கு ஒரு குறிப்பிட்ட ஐடியை ஒதுக்கவும்:

அடுத்து, முந்தைய முறையில் விவாதிக்கப்பட்டபடி பின்னணிபடம்() செயல்பாட்டை அணுகும் ஒரு கிளிக் நிகழ்வைக் கொண்டு ஒரு பொத்தானை உருவாக்கவும்:

கடைசியாக, '' என்ற செயல்பாட்டை அறிவிக்கவும் பின்னணி படம்() ” இதேபோல். இங்கே, 'ஐப் பயன்படுத்தி வரையறுக்கப்பட்ட ஐடியை அணுகவும் getElementById() ” முறை மற்றும் குறிப்பிட்ட பின்னணி படத்தை அதில் பயன்படுத்தவும். இது பத்தியின் பின்னணியில் வண்ணத்தை செயல்படுத்தும்:

வெளியீடு

ஜாவாஸ்கிரிப்டில் பின்னணி படத்தை மாற்றுவதற்கான எளிதான முறையை நாங்கள் தொகுத்துள்ளோம்

முடிவுரை

Javascript இல் பின்னணி படத்தை மாற்ற, ' பின்னணி படம் 'சொத்து' DOM ” ஒரு செயல்பாட்டைப் பயன்படுத்தி அல்லது குறிப்பிட்ட ஐடியைப் பயன்படுத்தி முழு இணையப் பக்கத்திலும் குறிப்பிட்ட பின்னணி படத்தைப் பயன்படுத்துவதற்கு  “ getElementById() 'முறை மற்றும் விண்ணப்பம்' பின்னணி படம் 'குறிப்பிட்ட சொத்து' பத்தி ”. இந்த வலைப்பதிவு JavaScript இல் பின்னணி படங்களை மாற்றுவதற்கான முறைகளை விளக்குகிறது.