var text = document.querySelector('p')
for(var i=10px; i<=40px; i++)
  text.style.fontSize = i; 

मुझे एक स्क्रिप्ट चाहिए जो फॉर-लूप के प्रत्येक पुनरावृत्ति में फ़ॉन्ट आकार को बढ़ाती है। उपरोक्त कोड मेरी आवश्यकता का प्रोटोटाइप है (जो काम नहीं करेगा क्योंकि पिक्सल को एक चर के लिए असाइन नहीं किया जा सकता है)। मुझे सही कोड प्रदान करने में मदद करें।

1
Surya Swanoff 31 मार्च 2018, 10:23

3 जवाब

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

आप शायद इसके बजाय सेटटाइमआउट रिकर्सन का उपयोग करना चाहते हैं, इसलिए टेक्स्ट तुरंत आकार में वृद्धि नहीं करता है:

var text = document.querySelector('p');

function increaseTextSize(size) {
  text.style.fontSize = size + 'px'; 
  if (size <= 40) setTimeout(increaseTextSize, 50, size + 1);
}
increaseTextSize(10);
<p>my text</p>
2
CertainPerformance 31 मार्च 2018, 07:25
var text = document.querySelector('p')

for (var i = 10; i <= 40; i++) {
  text.style.fontSize = `${i}px`;
}

आप px को लूप में नहीं जोड़ सकते क्योंकि यह एक पूर्णांक होना चाहिए।

2
Ru Chern Chong 7 अक्टूबर 2019, 23:48

आप CSS ट्रांज़िशन इफ़ेक्ट का उपयोग करके इस डेमो को भी आज़मा सकते हैं:

// After 500ms change the font from 10 to 60px
// and css will take care of the rest
setTimeout(() => {
  var text = document.querySelector('p');
  text.style.fontSize = '60px';
  text.style.color = 'blue';  // <-- you can also add color effects, if you want
}, 500);
p {
  font-size: 10px;
  color: red;
  -webkit-transition: all 2.5s ease;
  -moz-transition: all 2.5s ease;
  -o-transition: all 2.5s ease;
  -ms-transition: all 2.5s ease;
}
<p>Hello World!</p>
2
palaѕн 31 मार्च 2018, 07:52