JavaScript 修改 body 伪元素 filter 属性 - 代码示例 - 常规

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>WebCat</title>
    <style>
<pre><code>  body{
    background-image:url(&quot;https://jsmov2.a.yximgs.com/ufile/atlas/NTI0NjY5MzY3NTEzNTQ2NjMwOV8xNjkxMDYzMTUxNTkzXzE1.jpg&quot;);
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
    }
  body:after {
		content: &quot;content&quot;;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		/* 从父元素继承 background 属性的设置 */
		background: inherit;
		/*背景模糊*/
		filter: blur(1px);
        z-index:-1;
	}
  #preview{
    max-width:80%;
  }
&lt;/style&gt;
</code></pre>
  </head>
  <body id="body">    
    <input type="file" />
    <input id="range" type="range" value="50">
    <img src="" id="preview" alt=""/>
    <script>
      var element = document.querySelector('body');
      var content = window.getComputedStyle(element, ':after');
      var inp = document.querySelector("input");
      range.onchange = function(){
alert(range.value);
        content.style.filter="10px";
//`blur(${range.value/10}px)`
      }
      inp.onchange = function(){
        var file = inp.files[0];
        var reader = new FileReader();
        reader.onload = (e) =>{
          body.style.backgroundImage = `url(${e.target.result})`;
        }
          reader.readAsDataURL(file);
      }
    </script>
  </body>
</html>修改body伪元素的filter的值内容：要修改body伪元素的filter的值，可以通过JavaScript代码来实现。首先，需要获取body伪元素的样式对象，然后通过修改其filter属性的值来改变滤镜效果。以下是修改代码的示例：
<pre><code class="language-javascript">var element = document.querySelector('body');
var content = window.getComputedStyle(element, ':after');

// 修改filter的值
content.style.filter = 'blur(10px)';
</code></pre>
<p>在代码中，首先通过<code>querySelector</code>方法获取到body元素，然后使用<code>window.getComputedStyle</code>方法获取到body伪元素的样式对象<code>content</code>。接下来，通过修改<code>content</code>的<code>style.filter</code>属性的值来改变滤镜效果，例如将<code>blur</code>的值设为<code>10px</code>。</p>
<p>注意：由于body伪元素的样式是通过<code>:after</code>伪类设置的，所以需要使用<code>window.getComputedStyle</code>方法来获取其样式对象。</p>