How to Change CSS Property Using JavaScript

Getting or changing CSS class property with Javascript using DOM style

As mentioned by Quynh Nguyen, you don't need the '.' in the className. However - document.getElementsByClassName('col1') will return an array of objects.

This will return an "undefined" value because an array doesn't have a class. You'll still need to loop through the array elements...

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}

Set CSS property in JavaScript?

Use element.style:

var element = document.createElement('select');
element.style.width = "100px";

How to change CSS property by JS and use transition?

Firstly you are setting the transition of the --webkit-filter property, but you set the filter property.
Secondly as jneander mentioned the change is happening too quickly you should wrap it in a requestAnimationFrame or a 1ms timeout

Here is a working demo with the fixes:

let value = "15px";
let loadImg = document.getElementById("block");

let transitionDuration = "1s";
let timing = "ease-in-out";
let delay = "1s";

loadImg.style.filter = `blur(${value})`;
requestAnimationFrame(()=>{
  loadImg.style.transition = `filter ${transitionDuration} ${timing} ${delay}`;
  
  loadImg.style.filter = 'none';
});

#block {
  width: 150px;
  height: 150px;
  background: red;
}

<div id="block"></div>

Changing CSS properties via JavaScript

The stylesheets can be manipulated directly in JS with the document.styleSheets list.

Example:

<html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css">
body {
 background-color: red;
}
</style>
<script type="text/javascript">
var stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor="blue";
</script>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>

The example is by Mozilla Contributors and copied from:

Using dynamic styling information - Web API Interfaces | MDN

How to change css property with function in react

const [show, setShow] = useState(false)

const changeVisibility = () => {
  setShow(!show)
}

return (
<>
    <div className="ui form">
        {show && (
            <div className="field">
                <textarea rows="2"></textarea>
            </div>
        )}
    </div>
    <button onClick={changeVisibility}>show</button>
</>  
);