如何使用此代码保留字体格式？

Question

I put up some formatted text on the screen with the following command using inline CSS, but then later I periodically need to change the text with javascript. How can I keep the text formatting? I expect the best way to is to eliminate the inline CSS, but I am not sure how, and even then I don't know how I would maintain the formatting when updating the text.

 array = ["0", "31.2 ℃"]; // Dummy assignment document.getElementById("Out").innerHTML = array[1]; 

 div.Out { font: bold 65px Lora; } 

 Before: <div class="Out">30.1<span style="font-size:44px">&#8451;</span></div> After: <div id="Out" class="Out">30.1<span style="font-size:44px">&#8451;</span></div> 

When I do this, the font blows up.

Answer 1

You can get rid of inline css by defining your rules on the <style> part of your code, or better; by including it on a css file.

Your array already had a ℃ symbol, I deleted it.

 let data = ["0 &#8457", "31.2 &#8457", "-5 ℃", "36 ℃"]; changeContent(); function changeContent(){ let content = data[randomNumber(data.length)].split(' '); document.getElementById("out").innerHTML = content[0]; document.getElementById("corf").innerHTML = content[1]; } function randomNumber(number){ return Math.floor((Math.random() * number)); } 

 .out { font: bold 65px Lora; top: 45px; left: 510px; width: 300px; color: black; } .customfontsize{ font-size: 45px; } 

 <div> <span id="out" class="out"></span> <span id="corf" class="customfontsize"></span> </div> <button onclick="changeContent()">Change content</button> 

---

Edit: added a "change content" button :)

2nd edit: added a switch function, which will add/remove a class, and then change the innerHTML of the span if it has the class or not.

3rd edit: split temperature and unit.

Answer 2

OK, so I think the following could work, if I separate the temperature scale into a third array element. Thank you so much, sodimel!

Edit: It was a bit of a chore creating a third element, because the main code had to be re-arranged in a number of places to accommodate a third, optional element in the page as a whole, but it is working, now.

 let array = ["0", "80.2", "℉"]; // Dummy assignment function changeContent(){ let out = document.getElementById("out"); out.innerHTML = array[1]; let cf = document.getElementById("cf"); cf.innerHTML = array[2]; } 

 .out { font: bold 65px Lora; top: 45px; left: 510px; width: 300px; color: black; } .customfontsize{ font-size: 45px; } 

 <div class="out"> <span id="out">30.1</span> <span class="customfontsize" id="cf">&#8451;</span> </div> <button onclick="changeContent()">Change content</button> 

Answer 3

Here is one way of separating the numerical value and the degree symbol

 array = [19.0, 30.1, 31.2]; // Dummy assignment var output = document.getElementById("Out"); var degree = "&#8451;"; // celsius symbol function buttonClick(buttonID){ var newValue; if(buttonID=='b1'){newValue = array[0];} if(buttonID=='b2'){newValue = array[1];} if(buttonID=='b3'){newValue = array[2];} output.innerHTML = "<span class='degreeVal'>"+ newValue +"</span> <span class='degreeType'>"+ degree +"</span>"; } 

 .degreeVal { font: bold 65px Lora; } .degreeType { font: bold 44px Lora; } 

 <input type='button' id='b1' value='array value 1' onClick='buttonClick(this.id)'> <input type='button' id='b2' value='array value 2' onClick='buttonClick(this.id)'> <input type='button' id='b3' value='array value 3' onClick='buttonClick(this.id)'> <br><hr><br> Before: <div class="degreeVal">30.2 <span class="degreeType">&#8451;</span> </div> After: <div id="Out" class="degreeVal">0.0 <span class="degreeType"> </span> </div>