CSS 如何获取 translateX 和 translateY 的值

在本文中，我们将介绍如何通过 CSS 获取元素的 translateX 和 translateY 的值。

阅读更多：CSS 教程

什么是 translateX 和 translateY

在 CSS 中，translateX 和 translateY 是用来移动元素的 transform 属性的一部分。translateX 用于水平方向上的移动，而 translateY 用于垂直方向上的移动。它们是相对于元素自身位置的移动。

获取 translateX 和 translateY 的值

要获取元素的 translateX 和 translateY 的值，我们可以使用 JavaScript 来实现。通过获取元素的 transform 属性，然后解析出其中的 translateX 和 translateY 值。

下面是一个示例代码，演示了如何获取一个元素的 translateX 和 translateY 的值：

// 获取元素
const element = document.getElementById('myElement');

// 获取元素的 transform 属性
const transform = window.getComputedStyle(element).getPropertyValue('transform');

// 解析 translateX 和 translateY 的值
const match = transform.match(/translate((.*?))/);
const translateValues = match ? match[1].split(',') : [];

// 获取 translateX 和 translateY 的值
const translateX = parseInt(translateValues[0]);
const translateY = parseInt(translateValues[1]);

// 打印结果
console.log('translateX:', translateX);
console.log('translateY:', translateY);

在上面的示例代码中，我们首先获取了元素的 transform 属性。然后，我们使用正则表达式来解析出其中的 translateX 和 translateY 的值。最后，我们将这些值存储在 translateX 和 translateY 变量中，并打印出结果。

请注意，由于 translateX 和 translateY 的值可以是小数，因此在实际使用中可能需要进行适当的转换和处理。

示例

为了更好地理解如何获取 translateX 和 translateY 的值，下面我们将演示一个示例。假设我们有一个带有按钮的 <div> 元素，当点击按钮时，我们将获取该元素的 translateX 和 translateY 的值，并在控制台中打印出来。

HTML 代码：

<div id="myElement" style="transform: translateX(100px) translateY(50px);">
  <button onclick="getValue()">获取值</button>
</div>

JavaScript 代码：

function getValue() {
  // 获取元素
  const element = document.getElementById('myElement');

  // 获取元素的 transform 属性
  const transform = window.getComputedStyle(element).getPropertyValue('transform');

  // 解析 translateX 和 translateY 的值
  const match = transform.match(/translate((.*?))/);
  const translateValues = match ? match[1].split(',') : [];

  // 获取 translateX 和 translateY 的值
  const translateX = parseInt(translateValues[0]);
  const translateY = parseInt(translateValues[1]);

  // 打印结果
  console.log('translateX:', translateX);
  console.log('translateY:', translateY);
}

在上面的示例中，当点击按钮时，会调用 getValue() 函数来获取元素的 translateX 和 translateY 的值，并打印出来。