मैं एक इनलाइन शैली कैसे प्राप्त कर सकता हूं और सभी टेक्स्ट को अलग कर सकता हूं ताकि मैं शैली को बदलने के लिए एक संख्या की गणना कर सकूं? मैंने एक रोटेट बटन बनाया है जो 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>
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>
ठीक है, ट्रांसफॉर्म का उपयोग करके डिव घुमाएँ
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>
आप कोण को स्टोर करने के लिए 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>
आप वास्तव में इतने करीब हैं, आपको बस ".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>