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>