Javascript 如何将元素的背景位置更改为新的CSS属性？

我有以下代码：

$(".element").css("background-position","center");

出于某种原因，它不会在CSS中创建名为

background position:center

的新属性，而是将其添加到background属性中，如下所示：

background: center center rgb(251, 251, 251);

如何使更改背景位置将导致Javascript/中出现（就像您在inspect元素或纯css中所做的那样）：

background-position: center;

---

您可以使用css变量来实现这一点

示例代码

const Root=document.documentElement；
变量h_Pos=[‘中间’、‘右’、‘左’]，nPH=0
，v_Pos=['中间'，'底部'，'顶部']，净现值=0
btH.onclick=\=>{nPH=++nPH%3；Root.style.setProperty（'--PosH'，h_Pos[nPH]））
btV.onclick={nPV=++nPV%3；Root.style.setProperty（'--PosV'，v_Pos[nPV]）}

：根目录{
--时尚：中心；
--PosV：中心；
}
html{
身高：100%；
背景：橙色无重复变量（--PosH）变量（--PosV）url(https://i.picsum.photos/id/926/200/200.jpg);
}

改变水平位置
更改垂直位置

这就是为什么有时我们会面临不同浏览器之间的兼容性问题。以前，他们对显示无效HTML或CSS的要求更严格。如今，他们对非标准编码有了更大的容忍度，但他们也可以提供意想不到的代码来强制执行他们的标准

您看到的只是浏览器呈现代码的方式。我认为

center

是浏览器用来区分的默认值

center top
center bottom

此外，Chrome inspector有时可能会玩得很聪明。这是单击以下代码段中的按钮后“计算”的示例：

$（'styler'）。在（'click'，function（）上{
$（“#元素”）.css（{“背景位置”：“中心”，“背景颜色”：“透明”，“背景重复”：“无重复”，“自定义”：“非有效”}）；
var posTxt=$（'#element'）.css（'background-position'）；
var pos=$（'#element'）.css（'backgroundPosition'）；
log（'Text:'+posTxt）；
log（'Like Javascript:'+pos）；
//它与使用纯Javascript显示的值相同
var elem=document.getElementById（'element'）；
var tab=window.getComputedStyle（elem，null）.backgroundPosition.trim（）；
log（'Javascript:'+tab）；
});
/*已使用样式*/
#元素{
背景色：rgba（201,76,76）；
宽度：500px；
高度：500px；
填充：10px；
}

改变风格
…
？它不起作用吗？@Taplar它在应用Javascript后起作用-然而，在我的网站上，HTML在每次间隔后都会被检索（它总是被更新），并作为一个新文件保存在服务器上。该新文件具有
背景：中心rgb（251，251，251）CSS，它并不总是正确显示（有时正确，有时不正确）。有一个
背景位置：x
始终工作我会使用这三个：
背景重复：无重复，
后台附件：固定，
背景位置：中间，@Osman有什么不同吗？原因是您可以使用css或javascript设置
背景颜色：rgb（251，251）
，javascript会在background属性中显示所有这些颜色。如果有区别，可能是因为优先权