时间戳

首页 > 解决方案 > 将属性添加到现有样式

html - 将属性添加到现有样式

问题描述

我试图通过使用将元素向左移动transform。但是，样式上已经有一个现有属性，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，但由于库，它是为特定元素自动设置的样式。如果有帮助，我正在使用的库是Leaflet for Angular

标签： htmlcssleaflettransformngx-leaflet

解决方案

实现此效果的一种快速而肮脏的方法是利用relative positioning，使用以下 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>

推荐阅读