向现有样式添加属性

Question

我想通过使用transform将元素向左移动。但是，样式中已经存在一个名为transform: translate3d(tx, ty, tz)的属性。

我想要做的是在translate3d(tx,ty,tz)之外，再添加一个名为translateX(tx)的属性。因此，整个样式看起来像这样： transform: translate3d(tx, ty, tz) translateX(tx) CSS有没有办法实现这个效果？我不想覆盖原有的样式属性，而是想在其基础上添加新的属性。我的项目是Angular，所以我需要在组件端编写代码吗？非常感谢您的帮助！

编辑：我还应该提到，translate3d样式已经针对该元素定义过了，不是在我的CSS文件中，而是由默认设置的库（我正在使用设置了元素样式的库）设置的。我想知道的是如何获取当前的样式，即transform: translate3d并将translateX样式添加到其中，使其看起来像： transform: translate3d(tx, ty, tz) translateX(tx) 我再说一遍，我没有在自己的CSS文件中设置translate3d属性，但它是因为该库自动设置了该特定元素的样式。如果有用的话，我正在使用的库是Angular的Leaflet。

- fairlyMinty

---

@IvanSanchez，特别是弹出窗口部分。 leaflet-popup - fairlyMinty

这是一个 XY 问题。使用 L.Popup 的 offset 选项（从 DivOverlay 继承）。请参阅 https://leafletjs.com/reference-1.7.1.html#popup-option。 - IvanSanchez

@IvanSanchez 我明白了..所以我需要设置弹出窗口的偏移量，对吧？但是如果我有多个弹出窗口，并且弹出窗口的大小不总是相同的呢？ - fairlyMinty

@IvanSanchez 那我怎么知道该将“offset”设置为多少呢？ - fairlyMinty

@IvanSanchez 我之前提过一个问题，其中包含了所有的代码、用例和截图，如果有帮助的话可以看一下：https://dev59.com/mcLra4cB1Zd3GeqPBBG6 - fairlyMinty

Answer 1

更新2

不再使用自定义变量。此示例直接更改translate3d的x值。注意：我大部分从另一个SO帖子中复制了getTransform函数。

const myEl = document.querySelector(".myElement");
const MOD = 10;

const getTransform = el => {
  var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform');
  var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/);

  if (!results) return [0, 0, 0];
  if (results[1] == '3d') return results.slice(2, 5);

  results.push(0);
  return results.slice(5, 8);
}

document.querySelector(".button").addEventListener("click", () => {
  const [x, y, z] = getTransform(myEl);
  const newX = parseInt(x, 10) + MOD;
  myEl.style.transform = `translate3d(${newX}px, ${y}, ${z})`;
});

.myElement {
  transform: translate3d(100px, 0, 0);
  display: inline-block;
  padding: 1rem;
  background-color: tomato;
  color: white;
  transition: 0.3s transform;
}

.button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
  padding: .5rem 0;
  color: white;
  font-size: 1.4rem;
}

<div class="myElement">Test</div>
<button class="button">Move it</button>

---

更新

这将起作用并且在 translate3d 中将初始的 x 转换增加 10px：

/* 200px + 10px = 210px x translation */
transform: translate3d(200px, 0, 0) translateX(10px);

div {
  background-color: red;
  padding: 1rem 2rem;
  display: inline-block;
  transform: translate3d(200px, 0, 0) translateX(10px);
}

<div></div>

---

原始答案

不要使用这种模式...

transform: translate3d(tx, ty, tz) translateX(tx);

...你可以设置translate3d属性，使其预先使用自定义属性，并根据需要更新各个值。

transform: translate3d(var(--tx), var(--ty), var(--tz));

在下面的例子中，我正在更新单个自定义属性以将方框向下和向右移动。请注意，没有任何内容被覆盖，并且我们对要进行的更改具有完全控制权。

document.querySelector(".button").addEventListener("click", () => {
  const style = document.documentElement.style;
  style.setProperty("--tx", "120%");
  style.setProperty("--ty", "80px");
});

:root {
  --tx: 100%;
  --ty: 40px;
  --tz: 0;
}

.myElement {
  transform: translate3d(var(--tx), var(--ty), var(--tz));
  display: inline-block;
  padding: 1rem;
  background-color: tomato;
  color: white;
  transition: 0.3s transform;
}

.button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
  padding: .5rem 0;
  color: white;
  font-size: 1.4rem;
}

<div class="myElement">Test</div>
<button class="button">Move it</button>

- Andy Hoffman

---

唔，唯一的问题是 translate3d 已经设置好了，我不想修改或更改它。我只想在 transform 样式中添加 translateX(-50%) 来将元素向左移动 t9。 - fairlyMinty

@fairlyMinty 不太确定你的意思。我回答的重点是你可以一次只更改 translate3d 的一个部分。translate3d 的第一个参数就是 translateX。 - Andy Hoffman

@fairlyMinty 我明白了。我更新了我的答案，以便原始的 translate3d 不变，而额外的 translateX 只是在 translate3d 中定义的当前 x 值上添加。 - Andy Hoffman

我看到你所做的了。我想我也应该提一下，translate3d 样式已经为元素定义好了，不是在我的 CSS 文件中，而是默认情况下（我正在使用一个设置元素样式的库），因此我需要找出如何获取当前的样式，即 transform: translate3d 并将 translateX 添加到其中。 - fairlyMinty

啊，我明白你是怎么做的了。你必须使用 document.querySelector 来完成它。所以没有办法通过 CSS 来实现这个。 - fairlyMinty

Answer 2

实现这种效果的一种简单而快捷的方法是利用相对定位，使用以下CSS属性：

• position: relative
• left: [tx]

---

工作示例：

.my-heading-a,
.my-heading-b {
  position: relative;
  transform: translate3d(40px, 20px, 10px);
}

.my-heading-a {
  left: 0;
}

.my-heading-b {
  left: 80px;
}

<h2 class="my-heading-a">My Heading A</h2>
<h2 class="my-heading-b">My Heading B</h2>

- Rounin