如何获得内联样式剥离除数字以外的所有文本?

Question

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

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

每次单击 im tryng 以获取样式的旋转编号并向其添加 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

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

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>

Answer 2

好的，使用变换旋转div

function rotateMe() {
var lineStyle = document.getElementById('toRotate').style;
var rotate = document.querySelector('input[name="rotate"]:checked').value;
var styNum = lineStyle.transform.replace(/[^0-9]/g, '');
var calAmount = 0;  
var rotateScale = parseInt(document.getElementById('rotatescale').value);
if(rotate == 'right')
{
calAmount = parseInt(styNum) + rotateScale;
}
else
{
calAmount = (-rotateScale) - parseInt(styNum);
}

document.getElementById('toRotate').style.transform = "rotate(" + calAmount + "deg)";
//console.log(calAmount);
//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;
}

Rotate Right<input type="radio" checked name="rotate" value="right"> Rotate Left<input type="radio" name="rotate" value="left">
<br/><br/>
<input type="text" id="rotatescale" value="45">
<br/>
<br/>
<div style="transform:rotate(0deg)" id="toRotate" class="mydiv">My Div</div>
<button onclick="rotateMe();" id="rotateButton" type="button">rotate</button>

Answer 3

您可以使用 CSS 变量(--rotation( 来存储角度，并使用 CSS 中的变量作为转换的值。每次点击时，获取变量的当前值，加 45 并再次设置：

const rotation = '--rotation';
const toRotate = document.querySelector('#toRotate');
function rotateMe() {
const rotate = parseInt(getComputedStyle(toRotate).getPropertyValue(rotation));
toRotate.style.setProperty(rotation, `${rotate + 45}deg`);
}

.mydiv {
background-color: blue;
width: 150px;
height: 150px;
float: left;
color: #ffffff;
--rotation: 45deg;
transform: rotate(var(--rotation));
}
#rotateButton {
width: 80px;
height: 60px;
float: left;
}

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

Answer 4

你实际上如此接近，你需要做的就是添加".transform"和"parseInt"，瞧。

查看我的片段，希望你有一个美好的一天..

<script>
function rotateMe() {
//add .transform
var lineStyle = document.getElementById('toRotate').style.transform;

var styNum = lineStyle.replace(/[^0-9]/g, '');

// add parseInt
var calAmount = parseInt(styNum) + 45;
document.getElementById('toRotate').style.transform = "rotate(" + calAmount + "deg)";
;
}
</script>