javascript - 如何获取内联样式去除除数字以外的所有文本？

Question

如何获得内联样式并去除所有文本，以便计算一个数字来替换样式？我创建了一个旋转按钮，它将旋转一个 div 45%。而不是使用

     document.getElementById('toRotate').style.transform += "rotate(45deg)";

每次单击时都会为样式添加一个额外的旋转我试图获取样式的旋转数并向其添加 45 然后替换数量所以我不会以这个结束

    <div style="transform:rotate(0deg); transform:rotate(45deg); transform:rotate(45deg) " id="toRotate" class="mydiv">My Div</div>

我在使用 replace(/[^0-9]/g, '') 时遇到错误。对此的任何帮助表示赞赏。

function rotateMe() {


  var lineStyle = document.getElementById('toRotate').style;
  var styNum = lineStyle.replace(/[^0-9]/g, '');
  var calAmount = styNum + 45;
  document.getElementById('toRotate').style.transform = "rotate(" + calAmount + "deg)";

  console.log(lineStyle);
  console.log(lineStyle.replace(/[^0-9]/g, ''));
}

.mydiv {
  background-color: blue;
  width: 150px;
  height: 150px;
  float: left;
  color: #ffffff;
}

#rotateButton {
  width: 80px;
  height: 60px;
  float: left;
}

<div style="transform:rotate(0deg)" id="toRotate" class="mydiv">My Div</div>
<button onclick="rotateMe();" id="rotateButton" type="button">rotate</button>

Answer 1

使用变量并在每次单击时添加 Angular

var calAmount =0;
function rotateMe() {
  calAmount+=45;
  document.getElementById('toRotate').style.transform = "rotate(" + calAmount + "deg)";
}

.mydiv {
  background-color: blue;
  width: 150px;
  height: 150px;
  float: left;
  color: #ffffff;
}

#rotateButton {
  width: 80px;
  height: 60px float:left;
}

<div style="transform:rotate(0deg)" id="toRotate" class="mydiv">My Div</div>
<button onclick="rotateMe();" id="rotateButton" type="button">rotate</button>