मैं एक इनलाइन शैली कैसे प्राप्त कर सकता हूं और सभी टेक्स्ट को अलग कर सकता हूं ताकि मैं शैली को बदलने के लिए एक संख्या की गणना कर सकूं? मैंने एक रोटेट बटन बनाया है जो 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>

मुझे प्रतिस्थापन (/ [^ 0-9]/जी, '') का उपयोग करके एक त्रुटि मिलती है। इसके साथ किसी भी मदद की सराहना की जाती है।

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>
1
Jonny 16 अक्टूबर 2019, 20:23

4 जवाब

सबसे बढ़िया उत्तर

एक चर का प्रयोग करें और हर बार क्लिक करने पर कोण जोड़ें

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 अक्टूबर 2019, 17:42

ठीक है, ट्रांसफॉर्म का उपयोग करके डिव घुमाएँ

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 अक्टूबर 2019, 19:04

आप कोण को स्टोर करने के लिए 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>
1
Ori Drori 16 अक्टूबर 2019, 17:52

आप वास्तव में इतने करीब हैं, आपको बस ".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>
0
hifebriansyah 16 अक्टूबर 2019, 17:39