时间戳

首页 > 解决方案 > 如何将元素的背景位置更改为新的 CSS 属性？

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

问题描述

我有以下代码：

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

出于某种原因，它不会在 CSS 中创建一个新属性，background-position: center而是将其添加到 background 属性中，如下所示：

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

我如何做到这一点，以便在Javascript / jQuery中更改背景位置（就像您可以在检查元素或纯 css 中所做的那样）：

background-position: center;

标签： javascriptjquerycss

解决方案

您可以使用 css 变量 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

示例代码

const Root   = document.documentElement;

var h_Pos = ['center','right','left']  , nPH = 0
  , v_Pos = ['center','bottom','top']  , nPV = 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]) }
:root {
  --PosH  : center;
  --PosV  : center;
}
html {
  height: 100%;
  background: orange no-repeat var(--PosH) var(--PosV) url(https://i.picsum.photos/id/926/200/200.jpg);
}
<button id="btH"> change horizontal Position</button>
<button id="btV"> change vertical Position</button>

推荐阅读