用JS的人可能会很简单。 如果在 Safari 浏览器中加载页面，需要覆盖一个类的样式。我想我已经拥有了一切，只是这行代码有问题。
此命令不会与具有相同类的所有元素对话，但它应该:
document.getElementsByClassName('.background').className += " safari";
这是我的。错误在于该 javascript 函数。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
div {
margin: 10px;
background: inherit;
width: 550px;
height: 450px;
}
.background {
background: rgba(255, 20, 0, 0.3);
filter: blur(10px);
}
.safari {
background: red!important;
-webkit-backdrop-filter: blur(10px)!important;
}
</style>
</head>
<body>
<div class='background'></div>
<div></div>
<div class='background'></div>
<div></div>
<div></div>
<script type="text/javascript">
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
document.getElementsByClassName('background').className += " safari";
}
</script>
</body>
</html>我尝试了什么
1javascript
还尝试使用相同的代码将类“背景”更改为 ID“背景”，而不是在代码的 javascript 部分我将 getElementsByClassName 更改为 getElementByID - 这有效但它仅更改了具有该 ID 的第一个元素。具有该 ID 的其余元素将被忽略。
2条件注释
我尝试避免使用 JS 并在下面的链接后使用条件注释 - 两种浏览器都使用 webkit，所以我想这是不可能的。
Is there any equivalent to IE conditional comment for chrome and safari?
感谢您的帮助。
最佳答案
您需要遍历所有具有该类的元素
var bgelements = document.getElementsByClassName('background');
for(var i = 0; i < bgelements.length; i++) {
bgelements[i].className += " safari";
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
div{
margin: 10px;
background: inherit;
width: 550px;
height: 450px;
}
.background{
background: rgba(255,20,0,0.3);
filter: blur(10px);
}
.safari{
background: red!important;
-webkit-backdrop-filter: blur(10px)!important;
}
</style>
</head>
<body>
<div class='background'></div>
<div></div>
<div class='background'></div>
<div></div>
<div></div>
<script type="text/javascript">
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
var bgelements = document.getElementsByClassName('background');
for(var i = 0; i < bgelements.length; i++) {
bgelements[i].className += " safari";
}
}
</script>
</body>
</html>关于javascript - 使用 JS 覆盖类的样式，以便更改可以在具有该类的所有元素上可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51198795/