使用JavaScript实现图片模糊效果失效，附代码求解决方案

核心问题排查与修复方案 #

1. 变量作用域与DOM元素获取问题

确保filtercn和img变量能被applyFilter函数访问到，同时确认img正确获取了目标图片DOM元素：

// 替换成你的图片ID
const img = document.getElementById('your-image-id');
// 全局声明，让applyFilter可访问
const filtercn = document.querySelectorAll('input[type=range]');

2. CSS滤镜样式格式错误

多个CSS滤镜效果之间必须用空格分隔，原代码拼接时没有添加空格，会导致样式解析失败。修改拼接逻辑：

function applyFilter(){
    let fl='';
    filtercn.forEach(function(s){
        // 每个滤镜后添加空格，避免样式连写失效
        fl += `${s.dataset.filter}(${s.value}${s.dataset.scale}) `;     
    });
    // 移除末尾多余空格
    img.style.filter = fl.trim();
};

3. 事件触发时机优化

原代码使用onchange仅在滑块松开时触发，换成oninput可实现拖动时实时预览效果：

<div>
    <span>Blur</span>
    <input id="blur" type="range" min="0" max="100" value="0" oninput="applyFilter()" data-filter="blur" data-scale="px"><br>
</div>

4. 初始状态未应用

页面加载时需要手动调用一次applyFilter，确保初始滤镜值（比如value="0"）生效：

// 页面加载完成后初始化滤镜
window.addEventListener('load', applyFilter);

完整可运行代码示例 #

<div>
    <span>Blur</span>
    <input id="blur" type="range" min="0" max="100" value="0" oninput="applyFilter()" data-filter="blur" data-scale="px"><br>
</div>
<!-- 替换成你的图片地址和ID -->
<img id="target-image" src="your-image-url.jpg" alt="需要添加模糊效果的图片">

<script>
const img = document.getElementById('target-image');
const filtercn = document.querySelectorAll('input[type=range]');

function applyFilter(){
    let fl='';
    filtercn.forEach(function(s){
        fl += `${s.dataset.filter}(${s.value}${s.dataset.scale}) `;     
    });
    img.style.filter = fl.trim();
};

// 初始化应用滤镜
window.addEventListener('load', applyFilter);
</script>

内容的提问来源于stack exchange，提问作者Salman Ahmed