如何仅在Safari中使用userAgent显示图像

Question

我在这个网站上有一些WebGL图像，但它们在Safari中不起作用，所以我想我只在Safari显示简单的图像。我正在使用userAgent，但我想我遗漏了一些内容。我也在控制台上得到了这个：

Uncaught TypeError: Cannot set property ‘display’ of undefined

非常感谢任何帮助或提示！

const editorImg = document.querySelectorAll('.editor-img');
if(/Safari/i.test(navigator.userAgent)){
editorImg.style.display = "block";
} else {
editorImg.style.display = "none"; 
console.log('hidden');
}

这是我的暂存链接：https://5c98ad-2bd965dd7504daa4ac960eec46ab6863.webflow.io/

Answer 1

当使用querySelectorAll时，您会得到一个匹配元素的数组，这就是为什么editorImg.style在错误中等于undefined的原因。

为了获得这些元素的风格，你可以：

1-元件阵列循环

editorImg.forEach(el => {
el.style.display = block;
})

2-使用querySelector，假设.editorimg只有一个匹配元素