setProperty with CSS variables

PHOTO

Thu Feb 20 2025 00:46:19 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #setproperty #cssvariables

/**
We want to change the grid repeat() depending on the items in a grid
where repeat(4, 1fr) are dynamic values we can change in JS using setProperty()
note: setProperty(property-name, value)
*/

// our html = we add a data-grid attribure to show the grid number
<div class="qld-compare_page__courses" data-grid></div>

// our css
.courses{
  	//repeat(4, 1fr); replace with 2 new css variables, and a fallback
  	// in this case var(--compare-col-count) has a fallback of 4 
   repeat(var(--compare-col-count, 4), var(--compare-col-width, 205px));
}

// JS function

function adjustGrid(number) { // number will the dynamic value that changes
  	// get the parent to which the grid willl be appplied
    const parentGrid = document.querySelector(".qld-compare_page__courses");

 	 // if element exists
     if (parentGrid) { 
      // set the grid attribute in the html to the number value in the param
      parentGrid.dataset.grid = `courses-${number}`; 
	  // now we are using the set Property to get the var give it the number value
      parentGrid.style.setProperty("--compare-col-count", number);

       switch (number) { // if numbers 1, 2, 3 or 4 is reached then do your thing!
            case 1:
           // here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 230px)");
            break;
           
            case 2:
			// here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 249px)");
            break;

            case 3:
			// here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 1fr)");
            break;

           	case 4:
			// here we are using setProperty() to target that css var, and apply value
         	parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 1fr)");
            break;
           
                default:
                parentGrid.style.setProperty("--compare-col-width", "205px");
                break;
            }
        }
    }



	//use local storage for the  number we want
  adjustGrid(JSON.parse(localStorage.getItem("courses") || "[]").length);




// the css starter
// note we are resetting the --compare-col-count
 &__courses {
      display: grid;
      grid-template-columns: clamp(120px, 39vw, 180px) repeat(var(--compare-col-count, 4), var(--compare-col-width, 205px));
      grid-template-rows: repeat(2, 1fr) repeat(6, 90px) repeat(1, 1fr);
      z-index: 1;
      column-gap: 1.6rem;


// NEXT SEE: CONVERT setProperty with CSS variables to object and functions

COPY

Save snippets that work from anywhere online with our extensions

Comments

JS

@davidmchale

If statement with switch delete duplicates from an array loop and find class Nullish with an Object - basic tranverse classes in a list substring capitalize substring text with elipses array.at() js media query Dynamic Filter - buttons advanced flow converted if statement Add an array to a HTML dataset getElement Function Intersection Observer template intersection Observer Basic Example fetch data, display and filter for of loop - get index get random index value from an array fetch with post method get id value from url debounce for scrolling get element or elements check functions return values from functions indexOf explantion sorting basic using for-of loop for getting index value of iteration import json data into a JS module Splide slider with modal JS change active class if url path matches Pagination / array of arrays FIlter array or return full array price formatting ignores wrapping element on click Create a dummy array with numbers Random Generated Number Dummy array - list items dummy id Limits the amount of text Random Number generator function format date function Remove duplicates from JSON array data Filter Posts from state remove duplicates and create object simple ternary remove transition with propertyName sorting in reverse counting items using reduce splice explanation Declaring Variables Get primitive properties on a number / string etc using proto check an array of objects exists / check using regex Destructuring nested function scope IFFE function basic switch Switch with function passing an object check length of object while loops (for when the number we are iterating over is unknown) Ternary with 2 / 3 conditions for of loop with index array nested ternary operator callbacks Method Borrowing this keyword and arrow functions rest operator - args functions p1 rest operator - args functions p2 for of loop with index and entries callback functions explained version 1 callback functions explained version 2 Form and value IF Element shorthand function as a callback inside a higher order function Using param for symbol remove 'px' from number scrolling behaviour test 1 clearing event listeners new URL applying css vars scroll behaviours testing intersection observer intersection observer with loop JS docs - writing js docs check is key exists call() nested ternary with function forEach with function and ...args using template literals filter duplicates get class by indexOf returning ternary operator remove children from parent bootstrap rows with cols fetching multple data endpoints Promise.all remove file extension Js snippet for aria expanded passes this from a function containing a listener, to another function dynamic function to change icons compare arrays and push to an empty instead of pushing an object to a data array return the Object.entries(data).map Creating Dynamic filtering using JSON Advanced toggling with 3rd param of force Dynamic Key Assignment flatmap for arrays passing key value pairs from one object to another FInding Prototype Methods Returns Items that are true returning the item data from an array of objects sorting via switch statement filtering with checkboxes JS Docs cheatsheat for param types matches Js syles object on a div element bind grouping groupby() checkbox example conditions modal for text links reduce - dynamic toggle class with force returning objects setProperty with CSS variables CONVERT setProperty with CSS variables to object and functions CONVERT setProperty with CSS variables to object and functions version 2 uses an object instead of a switch statement cookie object functions mapping 3 Async Await / Promise resolve reject filter filter out items from array1 based on array2 promise with init function

CSS

@davidmchale

Expanding Div with height Breakout Container Google Font preload Random Image URL Custom Properties width min() counter incrementer custom radio buttons drop button with active SVG <use> with html Preconnect fonts css maps scss map with loop and conditional Viewing a map object only element if we style multiple Grid with Subgrid and responsive first column on mobile stretch child container queries setProperty with CSS variables

#setproperty #cssvariables

setProperty with CSS variables

/**
We want to change the grid repeat() depending on the items in a grid
where repeat(4, 1fr) are dynamic values we can change in JS using setProperty()
note: setProperty(property-name, value)
*/

// our html = we add a data-grid attribure to show the grid number
<div class="qld-compare_page__courses" data-grid></div>

// our css
.courses{
  	//repeat(4, 1fr); replace with 2 new css variables, and a fallback
  	// in this case var(--compare-col-count) has a fallback of 4 
   repeat(var(--compare-col-count, 4), var(--compare-col-width, 205px));
}

// JS function

function adjustGrid(number) { // number will the dynamic value that changes
  	// get the parent to which the grid willl be appplied
    const parentGrid = document.querySelector(".qld-compare_page__courses");

 	 // if element exists
     if (parentGrid) { 
      // set the grid attribute in the html to the number value in the param
      parentGrid.dataset.grid = `courses-${number}`; 
	  // now we are using the set Property to get the var give it the number value
      parentGrid.style.setProperty("--compare-col-count", number);

       switch (number) { // if numbers 1, 2, 3 or 4 is reached then do your thing!
            case 1:
           // here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 230px)");
            break;
           
            case 2:
			// here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 249px)");
            break;

            case 3:
			// here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 1fr)");
            break;

           	case 4:
			// here we are using setProperty() to target that css var, and apply value
         	parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 1fr)");
            break;
           
                default:
                parentGrid.style.setProperty("--compare-col-width", "205px");
                break;
            }
        }
    }



	//use local storage for the  number we want
  adjustGrid(JSON.parse(localStorage.getItem("courses") || "[]").length);




// the css starter
// note we are resetting the --compare-col-count
 &__courses {
      display: grid;
      grid-template-columns: clamp(120px, 39vw, 180px) repeat(var(--compare-col-count, 4), var(--compare-col-width, 205px));
      grid-template-rows: repeat(2, 1fr) repeat(6, 90px) repeat(1, 1fr);
      z-index: 1;
      column-gap: 1.6rem;


// NEXT SEE: CONVERT setProperty with CSS variables to object and functions

#setproperty #cssvariables

CONVERT setProperty with CSS variables to object and functions

/**
We want to change the grid repeat() depending on the items in a grid
where repeat(4, 1fr) are dynamic values we can change in JS using setProperty()
note: setProperty(property-name, value)
*/
 
// our html = we add a data-grid attribure to show the grid number
<div class="qld-compare_page__courses" data-grid></div>
 
// our css
.courses{
  	//repeat(4, 1fr); replace with 2 new css variables, and a fallback
  	// in this case var(--compare-col-count) has a fallback of 4 
   repeat(var(--compare-col-count, 4), var(--compare-col-width, 205px));
}
 
// JS function



// create the changeGrid function outside the main function below
   function changeGrid(value){
       parentGrid.style.setProperty("--compare-col-width", value);
    }
       
 
function adjustGrid(number) { // number will the dynamic value that changes
  	// get the parent to which the grid willl be appplied
    const parentGrid = document.querySelector(".qld-compare_page__courses");
 
 	 // if element exists
     if (parentGrid) { 
      // set the grid attribute in the html to the number value in the param
      parentGrid.dataset.grid = `courses-${number}`; 
	  // now we are using the set Property to get the var give it the number value
      parentGrid.style.setProperty("--compare-col-count", number);
 
       /**
       switch (number) { // if numbers 1, 2, 3 or 4 is reached then do your thing!
            case 1:
           // here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 230px)");
            break;
           
            case 2:
			// here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 249px)");
            break;
 
            case 3:
			// here we are using setProperty() to target that css var, and apply value
            parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 1fr)");
            break;
 
           	case 4:
			// here we are using setProperty() to target that css var, and apply value
         	parentGrid.style.setProperty("--compare-col-width", "minmax(205px, 1fr)");
            break;
           
                default:
                parentGrid.style.setProperty("--compare-col-width", "205px");
                break;
            }
        }
       */
       
       
       /**
       1. create object with all options
       2. create a function to call inside the object
       3. The function returns the code want to repeat with params
       4. Call that function using the object[dynamic] number
       */ 
       
       
       // Note we are still using number from the main function as this is the value
	  // that will output 1, 2, 3, 4
       
       const options = {
         // use cases here for key value pairs
				 1: () => changeGrid("minmax(205px, 230px)"),
                2: () => changeGrid("minmax(205px, 249px)"),
                3: () => changeGrid("minmax(205px, 1fr)"),
                4: () => changeGrid("minmax(205px, 1fr)"),
       }
      
       
       // call it
       // param should be the dynamic value of the oject and the matching number param
       changeGrid(options[number]) 
       
       
       
    }
 
 
 
	//use local storage for the  number we want
  adjustGrid(JSON.parse(localStorage.getItem("courses") || "[]").length);
 
 
 
 


// here is the full JS code with CSS variables
	

    function cssColWidthVariable(value) {
        const parentGrid = document.querySelector(".qld-compare_page__courses");
        parentGrid.style.setProperty("--compare-col-width", value);
    }

  
    function adjustGrid(number) {
        const parentGrid = document.querySelector(".qld-compare_page__courses");
        if (parentGrid) {
            parentGrid.dataset.grid = `courses-${number}`;
            parentGrid.style.setProperty("--compare-col-count", number);

            const gridOptions = {
                1: () => cssColWidthVariable("minmax(205px, 230px)"),
                2: () => cssColWidthVariable("minmax(205px, 249px)"),
                3: () => cssColWidthVariable("minmax(205px, 1fr)"),
                4: () => cssColWidthVariable("minmax(205px, 1fr)"),
            };

            cssColWidthVariable(gridOptions[number] || "205px");
        }
    }

   
  
// call the function based on a changing number
adjustGrid(JSON.parse(localStorage.getItem("courses") || "[]").length);

#setproperty #cssvariables

CONVERT setProperty with CSS variables to object and functions version 2

// html
 <div id="app">
      <div class="grid-container">
        <div class="box"><a href="#">remove</a></div>
        <div class="box"><a href="#">remove</a></div>
        <div class="box"><a href="#">remove</a></div>
        <div class="box"><a href="#">remove</a></div>
      </div>
    </div>


//css


.grid-container {
  background-color: aliceblue;
  width: 100%;
  min-height: 200px;
  display: grid;
  column-gap: 1rem;
  grid-template-columns: repeat(
    var(--col-grid-count, 4),
    var(--col-make-width, 1fr)
  );
}

.box {
  width: 100%;
  height: 100%;
  background-color: firebrick;
  padding-top: 1rem;
}

.box a {
  text-align: center;
  margin-top: 1rem;
  color: white;
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}


//js

(function () {
  "use strict";

  const gridContainer = document.querySelector(".grid-container");

  if (!gridContainer) return;

  function changeItemWith(value) {
    gridContainer.style.setProperty("--col-make-width", value);
  }

  function updateGrid(number) {
    const updatedBoxes = document.querySelectorAll(".box").length;
    gridContainer.style.setProperty("--col-grid-count", updatedBoxes);

    const widthOptions = {
      1: () => changeItemWith("minmax(230px, 250px)"),
      2: () => changeItemWith("minmax(295px, 320px)"),
      3: () => changeItemWith("minmax(245px, 420px)"),
      4: () => changeItemWith("minmax(243px, 500px)"),
    };

    console.log(`Number of boxes: ${number}`);
    console.log(`Function in widthOptions:`, widthOptions[number]);

    // Fix: Call the function if it exists, otherwise apply default width
    // see note on how widthOptions[number](); works
    if (widthOptions[number]) {
      widthOptions[number]();
    } else {
      changeItemWith("205px"); // Default case
    }
  }

  function onHandleLink(event) {
    event.preventDefault();

    const link = event.currentTarget;
    const box = link.parentElement;

    if (box) {
      box.remove();
      // Fix: Pass the correct length
      updateGrid(document.querySelectorAll(".box").length); 
    }

    console.log(box);
  }

  function listeners() {
    document.querySelectorAll(".box").forEach((box) => {
      const link = box.querySelector("a");
      if (link) {
        link.addEventListener("click", onHandleLink);
      }
    });
  }

  function init() {
    // Fix: Pass the correct length
    updateGrid(document.querySelectorAll(".box").length); 
    listeners();
  }

  init();
})();



/*
NOTE; Understanding widthOptions 

widthOptions is an object where each key (like 1, 2, etc.) maps to a function:

const widthOptions = {
  1: () => changeItemWith("minmax(230px, 250px)"),
  2: () => changeItemWith("minmax(295px, 249px)"),
  3: () => changeItemWith("minmax(245px, 1fr)"),
  4: () => changeItemWith("minmax(243px, 1fr)"),
};

Each value is an anonymous function (() => {}) that calls changeItemWith(...).


Accessing a Function in an Object
If number is 1, then: widthOptions[1]

is the same as: () => changeItemWith("minmax(230px, 250px)");
which in the widthOptions object is:  1: () => changeItemWith("minmax(230px, 250px)")


So if we call it with (), it executes:
widthOptions[1]();
*/ 

// See codesandbox for my implementation
// https://codesandbox.io/p/sandbox/q3926h?file=%2Fsrc%2Findex.mjs%3A28%2C6-28%2C30

setProperty with CSS variables

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

CSS

Browse more snippets >>

setProperty with CSS variables

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

CSS

Browse more snippets >>

Embed code snippet