ஜாவாஸ்கிரிப்டில் உரையின் நிறத்தை மாற்றுவதற்கான முறைகளை இந்த ஆய்வு விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் உரையின் நிறத்தை மாற்றுவது எப்படி?
ஜாவாஸ்கிரிப்டில் உரை நிறத்தை மாற்ற, கீழே குறிப்பிடப்பட்டுள்ள முன் வரையறுக்கப்பட்ட ஜாவாஸ்கிரிப்ட் முறைகளைப் பயன்படுத்தவும்:
இந்த முறைகளை தனித்தனியாக விளக்குவோம்.
முறை 1: getElementById() முறை மூலம் style.color பண்புகளைப் பயன்படுத்தி உரையின் நிறத்தை மாற்றவும்
உரையின் நிறத்தை மாற்ற, நீங்கள் ' getElementById() 'முறையுடன்' நடை.நிறம் ”சொத்து. அத்தகைய சூழ்நிலையில், getElementById() முறையைப் பயன்படுத்தி உரை உறுப்பை அணுகலாம், பின்னர் HTML style.color பண்புடன் வண்ணப் பண்புக்கூறைப் பயன்படுத்தவும்.
தொடரியல்
getElementById() முறையின் உதவியுடன் வண்ணப் பண்புகளைப் பயன்படுத்தி உரை நிறத்தை மாற்ற கொடுக்கப்பட்ட தொடரியல் பயன்படுத்தவும்:
ஆவணம். getElementById ( 'ஐடி' ) . பாணி . நிறம் = 'நிறம்' ;' ஐடி ” என்பது உரை உறுப்பை அணுகுவதற்குக் குறிப்பிடப்பட்ட உறுப்பின் அடையாளமாகும், பின்னர் style.color பண்புகளைப் பயன்படுத்தி அதன் நிறத்தை மாற்றவும்.
கூறப்பட்ட கருத்தை புரிந்து கொள்ள கீழே உள்ள உதாரணத்தை நோக்கி செல்க!
உதாரணமாக
முதலில், இதைப் பயன்படுத்தி ஒரு தலைப்பை உருவாக்குவோம் குறிச்சொல்லிட்டு ஐடியை ஒதுக்கவும்' ஐடி ” இது h4 உறுப்பை அணுகப் பயன்படுகிறது, பின்னர், ஒரு செயல்பாட்டைத் தூண்டும் பொத்தானை உருவாக்கவும். நிறம் மாறு() ” ஒரு ஜாவாஸ்கிரிப்ட்(JS) கோப்பில் சேர்க்கப்பட்ட பொத்தானின் ஆன்க்ளிக் நிகழ்வு தூண்டப்படும்போது வரையறுக்கப்படுகிறது:
< h4 ஐடி = 'ஐடி' > LinuxHint க்கு வரவேற்கிறோம் h4 >< பொத்தான் வகை = 'பொத்தானை' கிளிக் செய்யவும் = 'நிறத்தை மாற்றவும்()' > மேஜிக்கை பார்க்க கிளிக் செய்யவும் பொத்தானை >
JS கோப்பில், '' என்ற செயல்பாட்டை வரையறுக்கவும் நிறம் மாறு() ” மற்றும் அதன் ஐடியை getElementById() முறைக்கு அனுப்புவதன் மூலம் தலைப்பைப் பெற்று அதன் நிறத்தை மாற்றவும்:
செயல்பாடு மாற்றம் நிறம் ( ) {ஆவணம். getElementById ( 'ஐடி' ) . பாணி . நிறம் = 'சிவப்பு' ;
}
கடைசியாக, HTML கோப்பில் உள்ள src குறிச்சொல்லைப் பயன்படுத்தி JavaScript கோப்பின் மூலத்தைக் குறிப்பிடவும்:
< ஸ்கிரிப்ட் எஸ்ஆர்சி = './JSfile.js' > கையால் எழுதப்பட்ட தாள் >சேர்க்கப்பட்ட பொத்தானைக் கிளிக் செய்யும் போது, உறுப்பு அதன் நிறத்தை '' என மாற்றியது என்பதை வெளியீட்டிலிருந்து காணலாம். சிவப்பு ”:
மற்ற முறையைப் பார்ப்போம்!
முறை 2: querySelector() முறை மூலம் style.color பண்புகளைப் பயன்படுத்தி உரையின் நிறத்தை மாற்றவும்
'' ஐப் பயன்படுத்தி உரையின் நிறத்தையும் மாற்றலாம் querySelector() ” பாணியுடன் கூடிய முறை.வண்ணப் பண்பு. இது ஐடி அல்லது ஒதுக்கப்பட்ட கிளாஸ் இரண்டையும் கொண்டு உறுப்பை அணுகும் போது getElementById() முறையானது அதன் ஒதுக்கப்பட்ட ஐடியுடன் உறுப்பைப் பெறுகிறது.
தொடரியல்
querySelector() முறையின் உதவியுடன் வண்ணப் பண்புகளைப் பயன்படுத்தி உரை நிறத்தை மாற்ற பின்வரும் தொடரியல் பயன்படுத்தவும்:
ஆவணம். querySelector ( 'ஐடி/வகுப்பு பெயர்' ) . பாணி . நிறம் = 'நிறம்' ;உதாரணமாக
இங்கே, நாம் பயன்படுத்துவோம் ' என்ற வகுப்பில் ஒரு பத்தியைச் சேர்க்க குறிச்சொல் நிறம் ”, இது
உறுப்பு மற்றும் JavaScript ஐ அழைக்கும் ஒரு பொத்தானை அணுக உதவும் நிறம் மாறு() ” முறை அதன் கிளிக் நிகழ்வு தூண்டப்படும் போது:
< ப வர்க்கம் = 'நிறம்' > LinuxHint க்கு வரவேற்கிறோம் ப >< பொத்தானை கிளிக் செய்யவும் = 'நிறத்தை மாற்றவும்()' > மேஜிக்கை பார்க்க கிளிக் செய்யவும் பொத்தானை >
வரையறையில் ' நிறம் மாறு() 'முறை, நாங்கள் அழைப்போம்' querySelector() ” வகுப்பின் பெயரை புள்ளியுடன் (.) கடந்து செல்லும் முறை, உறுப்பு அதன் வர்க்கப் பெயரின் அடிப்படையில் அணுகப்பட்டதைக் குறிக்கிறது, பின்னர் அதன் மீது வண்ணப் பண்புகளைப் பயன்படுத்துங்கள்:
செயல்பாடு மாற்றம் நிறம் ( ) {ஆவணம். querySelector ( '.நிறம்' ) . பாணி . நிறம் = 'மெஜந்தா' ;
}
இருப்பினும், HTML உறுப்பில் ஒரு ஐடியைப் பயன்படுத்தவும், querySelector() முறையைப் பயன்படுத்தி அதை அணுகவும், ' # 'ஐடி பெயருடன் அடையாளம்:
ஆவணம். querySelector ( '#நிறம்' ) . பாணி . நிறம் = 'மெஜந்தா' ;வெளியீடு
ஜாவாஸ்கிரிப்டில் உரை நிறத்தை மாற்றுவதற்கான எளிய அணுகுமுறையை நாங்கள் சேகரித்தோம்.
முடிவுரை
உரை நிறத்தை மாற்ற, getElementById() முறை அல்லது querySelector() முறையின் உதவியுடன் style.color பண்புகளைப் பயன்படுத்தலாம். getElementById() முறையானது HTML உறுப்பை அதன் ஒதுக்கப்பட்ட ஐடியின் அடிப்படையில் அணுக பயன்படுகிறது, அதே சமயம் querySelector() முறை முறையே (#) அல்லது (.) குறிகளைக் குறிப்பிடுவதன் மூலம் ஒதுக்கப்பட்ட ஐடி அல்லது வகுப்பின் அடிப்படையில் உறுப்பை அணுகும். ஜாவாஸ்கிரிப்டில் உரை நிறத்தை மாற்றுவதற்கான எளிய செயல்முறையை இந்த ஆய்வு விளக்குகிறது.