{"id":137206,"date":"2024-10-14T16:47:58","date_gmt":"2024-10-14T11:17:58","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137206"},"modified":"2024-10-17T11:26:30","modified_gmt":"2024-10-17T05:56:30","slug":"switching-custom-properties-with-javascript-custom-properties-and-css-functions","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/switching-custom-properties-with-javascript-custom-properties-and-css-functions\/","title":{"rendered":"Switching Custom Properties with JavaScript | Custom Properties and CSS Functions"},"content":{"rendered":"\n

CSS custom properties (also known as variables) allow you to define custom values that can be used throughout your stylesheet. This makes it easier to manage and update styles, especially in responsive web design.<\/p>\n\n\n\n

Switching Custom Properties with JavaScript<\/strong><\/p>\n\n\n\n

To switch custom properties dynamically based on user interactions or other conditions, you can use JavaScript to modify the style attribute of the :root element.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<div class=”element”><\/p>\n\n\n\n

  This is an element.<\/p>\n\n\n\n

<\/div><\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

:root {<\/p>\n\n\n\n

  –primary-color: blue;<\/p>\n\n\n\n

  –secondary-color: red;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

.element {<\/p>\n\n\n\n

  color: var(–primary-color);<\/p>\n\n\n\n

  background-color: var(–secondary-color);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

JavaScript<\/p>\n\n\n\n

function switchColors() {<\/p>\n\n\n\n

  const root = document.documentElement;<\/p>\n\n\n\n

  root.style.setProperty(‘–primary-color’, ‘green’);<\/p>\n\n\n\n

  root.style.setProperty(‘–secondary-color’, ‘yellow’);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Using JavaScript to Trigger the Switch<\/strong><\/p>\n\n\n\n

You can trigger the switchColors function based on user events like clicks, hover, or changes in screen size.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<button onclick=”switchColors()”>Switch Colors<\/button><\/p>\n\n\n\n

Responsive Considerations<\/strong><\/p>\n\n\n\n