如何获取 javascript 中的样式变换旋转值？

Question

我需要变换旋转值...？警报（"rotate(30deg)"）...

<div id="demo" style="transform: rotate(30deg);width:100px;height:50px;background-color:red;">

var myElement = document.getElementById("demo");
var rotate = getElementById("demo").style.transformRotate.value;
alert(rotate);

Answer 1

您需要存储 transform 而不是 transformRotate:

var myElement = document.getElementById("demo");
var transformation = myElement.style.transform;
alert(transformation);

<div id="demo" style="transform: rotate(30deg);width:100px;height:50px;background-color:red;">

Answer 2

您可以使用 match 解析 transform 样式以获得旋转值：

var myElement = document.getElementById("demo");
var rotate = myElement.style.transform.match(/rotate\((.+)\)/);
alert(rotate && rotate[1]);  // avoid error if match returns null

<div id="demo" style="transform: rotate(30deg);width:100px;height:50px;background-color:red;">

要将数字 (30) 与单位 (deg) 分开，您可以执行以下操作：

var myElement = document.getElementById("demo");
var rotate = myElement.style.transform.match(/rotate\((\d+)(.+)\)/);
if (rotate) {
  var [num, unit] = rotate.slice(1);  // slice is needed since first element contains entire match
  console.log('num:', num, 'unit:', unit);
}

<div id="demo" style="transform: rotate(30deg);width:100px;height:50px;background-color:red;">

如何获取 javascript 中的样式变换旋转值？

How to get style transform rotate value in javascript?

javascript

transform

rotation

return-value