¿Cómo puedo obtener un estilo en línea y eliminar todo el texto para poder calcular un número para reemplazar un estilo? Creé un botón de rotación que rotará un div 45%. En lugar de usar
document.getElementById('toRotate').style.transform += "rotate(45deg)";
Que agregará una rotación adicional al estilo cada vez que haga clic en intentar obtener el número de rotación del estilo y agregarle 45, luego reemplace la cantidad, así que no termino con esto
<div style="transform:rotate(0deg); transform:rotate(45deg); transform:rotate(45deg) " id="toRotate" class="mydiv">My Div</div>
Me sale un error al usar replace (/ [^ 0-9] / g, ''). Cualquier ayuda con esto es apreciado.
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>
4 respuestas
Use una variable y agregue el ángulo cada vez que haga clic
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>
En realidad tan cerca, todo lo que necesita hacer es agregar ".transform" y "parseInt" y listo.
Mira mi fragmento, espero que tengas un buen día ...
<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>
Puede usar una variable CSS (--rotation
) para almacenar el ángulo y usar la variable en el CSS como el valor de la transformación. En cada clic, obtenga el valor actual de la variable, agregue 45 y configúrelo nuevamente:
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>
Ok, rotar div usando transform
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>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.