CSS Variables and JavaScript

JavaScript உடன் CSS மாறிகளை மாற்ற கற்றுக்கொள்ளுங்கள்

Change Variables With JavaScript

CSS மாறிகள் DOM க்கு அணுகலைக் கொண்டுள்ளன, அதாவது நீங்கள் அவற்றை JavaScript உடன் மாற்றலாம்.

முந்தைய பக்கங்களில் பயன்படுத்தப்பட்ட உதாரணத்திலிருந்து --primary-bg-color மாறியைக் காண்பிக்கவும் மாற்றவும் எவ்வாறு ஒரு ஸ்கிரிப்டை உருவாக்கலாம் என்பதற்கான ஒரு உதாரணம் இங்கே. இப்போதைக்கு, நீங்கள் JavaScript உடன் பழக்கமில்லை என்றால் கவலைப்பட வேண்டாம். எங்கள் JavaScript டுடோரியலில் JavaScript பற்றி மேலும் அறியலாம்:

JavaScript Demo

CSS Variables with JavaScript Control

CSS Variable Demo Box

தற்போதைய மாறி மதிப்புகள்:

--primary-bg-color: #1e90ff, --box-size: 150px

நிறத் தேர்வு:

பெட்டி அளவு:

தற்போதைய அளவு: 150px

<script>
// Get the root element
var r = document.querySelector(':root');

// Function for getting a variable value
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --primary-bg-color variable
  alert("The value of --primary-bg-color is: " + rs.getPropertyValue('--primary-bg-color'));
}

// Function for setting a variable value
function myFunction_set() {
  // Set the value of variable --primary-bg-color to another value (in this case "green")
  r.style.setProperty('--primary-bg-color', 'green');
}
</script>

Example Explained

🔧 JavaScript குறியீடு விளக்கம்:

  1. ரூட் உறுப்பைப் பெறுதல்: document.querySelector(':root') CSS மாறிகள் சேமிக்கப்படும் ரூட் உறுப்பைப் பெறுகிறது
  2. மாறி மதிப்பைப் பெறுதல்: getComputedStyle(r).getPropertyValue('--variable-name') கணக்கிடப்பட்ட CSS பாணிகளிலிருந்து மாறி மதிப்பைப் பெறுகிறது
  3. மாறி மதிப்பை அமைத்தல்: r.style.setProperty('--variable-name', 'value') CSS மாறியின் மதிப்பை மாற்றுகிறது

⚠️ கவனத்திற்குரியது:

JavaScript மூலம் CSS மாறிகளை மாற்றுவது உடனடியாக பக்கத்தில் உள்ள அனைத்து தொடர்புடைய உறுப்புகளுக்கும் பயன்படுத்தப்படும். இது வலைப் பக்கங்களுக்கு டைனமிக் தீம் மாற்றங்கள் மற்றும் ரியல்-டைம் அம்சங்களைச் சேர்க்க ஒரு சக்திவாய்ந்த வழியாகும்.

Exercise

❓ JavaScript இல் CSS மாறியின் மதிப்பை அமைக்க எந்த முறை பயன்படுத்தப்படுகிறது?

style.setProperty()
✓ சரி! style.setProperty() முறை CSS மாறிகளை JavaScript இல் மாற்ற பயன்படுகிறது
setVariable()
✗ தவறு! setVariable() என்பது செல்லுபடியாகும் JavaScript முறை அல்ல
changeCSS()
✗ தவறு! changeCSS() என்பது செல்லுபடியாகும் JavaScript முறை அல்ல
updateStyle()
✗ தவறு! updateStyle() என்பது செல்லுபடியாகும் JavaScript முறை அல்ல

CSS var() Function

பின்வரும் அட்டவணை CSS var() செயல்பாட்டை விவரிக்கிறது:

Function Description
var() ஒரு CSS மாறியின் மதிப்பைச் செருகுகிறது