தீர்க்கப்பட்டது: ஜாவாஸ்கிரிப்ட் மூலம் css மாறியை எப்படி மாற்றுவது

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

var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");

இந்த குறியீட்டு வரி CSS மாறிக்கு புதிய மதிப்பை அமைக்கிறது. முதல் வரியானது "உறுப்பு" ஐடியுடன் உறுப்பைப் பெறுகிறது. இரண்டாவது வரி CSS மாறியின் மதிப்பை “–மாறி” “புதிய மதிப்பு” என அமைக்கிறது.

CSS மாறிகள்

உலகளாவிய மாறிகளைப் பயன்படுத்தாமல் உங்கள் CSS கோப்புகளில் தரவைச் சேமிப்பதற்கு CSS மாறிகள் ஒரு சிறந்த வழியாகும். தற்போதைய பக்கத்தின் அகலம் அல்லது உயரம் அல்லது தற்போதைய எழுத்துரு அளவு போன்ற தகவல்களைச் சேமிக்க அவற்றைப் பயன்படுத்தலாம்.

உங்கள் JavaScript குறியீட்டில் CSS மாறியைப் பயன்படுத்த, முதலில் உங்கள் ஆவணத்தின் நடை தாளில் css சொத்தை சேர்க்க வேண்டும். பின்னர், நீங்கள் var முக்கிய சொல்லைப் பயன்படுத்தி மாறியை வரையறுக்கலாம்:

var அகலம் = document.getElementById("myElement").offsetWidth;

நீங்கள் ஒரு மாறியிலிருந்து தனிப்பட்ட மதிப்புகளை அணுக css பண்பைப் பயன்படுத்தலாம்:

var அகலம் = document.getElementById("myElement").offsetWidth; var உயரம் = document.getElementById("myElement").offsetHeight;

CSS கட்டுப்படுத்தவும்

ஜாவாஸ்கிரிப்ட்டில், CSS ஐக் கட்டுப்படுத்த சில வழிகள் உள்ளன. ஒரு வழி css சொத்தைப் பயன்படுத்துவது. இந்த சொத்து உங்கள் ஆவணத்தில் ஒரு குறிப்பிட்ட உறுப்புக்கான பாணியை அமைக்க உங்களை அனுமதிக்கிறது.

CSS ஐக் கட்டுப்படுத்த மற்றொரு வழி ஸ்டைல் ​​​​பண்பைப் பயன்படுத்துவதாகும். இந்த சொத்து உங்கள் ஆவணத்தில் உள்ள அனைத்து கூறுகளுக்கும் பாணியை அமைக்க உங்களை அனுமதிக்கிறது.