¿Cómo obtener estilo de línea en línea todo el texto excepto el número?

Question

¿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>

javascript html css

1

Jonny 16 oct. 2019 a las 20:23

Answer 1

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>

3

Deepu Reghunath 16 oct. 2019 a las 17:42

Answer 2

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>

0

hifebriansyah 16 oct. 2019 a las 17:39

Answer 3

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>

1

Ori Drori 16 oct. 2019 a las 17:52

Answer 4

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>

2

Kalpesh Dabhi 16 oct. 2019 a las 19:04

¿Cómo obtener estilo de línea en línea todo el texto excepto el número?

4 respuestas

Nuevas preguntas

javascript