Skip to content
Advertisement

How to change backdrop-filter in javascript?

Hi i cannot change backdrop-filter with javascript please help me thanks.

<html>
<head>
<title>a problem</title>
<style>
 #div {
  width: 120px;
  height: 120px;
  backdrop-filter: blur(0); 
 }
</style>
</head>
<body>
 <div id="div"></div>
</body>
<script>document.getElementById("div").style.backdropfilter = "blur(15px)";</script>
</html>

Advertisement

Answer

You must use camelCase when updating CSS properties: e.g. .backdropFilter().

<html>
<head>
<title>a problem</title>
<style>
 #div {
  width: 120px;
  height: 120px;
  backdrop-filter: blur(0); 
 }

 body {  background: url(https://theoldreader.com/kittens/files/images/80144273@N00-2871547320/600x400.jpg) no-repeat }
</style>
</head>
<body>
 <div id="div"></div>
</body>
<script>document.getElementById("div").style.backdropFilter = "blur(15px)";</script>
</html>
Advertisement