Question

我使用以下命令使用嵌入式CSS在屏幕上放置了一些格式化的文本，但是后来我需要定期使用javascript更改文本。如何保持文本格式？我希望最好的方法是消除内联CSS，但是我不确定如何，即使那样，我也不知道在更新文本时如何保持格式。

array = ["0", "31.2 &#8451;"]; // 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>

执行此操作时，字体会爆炸。

Answer 1

您可以通过在代码的<style>部分上定义规则来摆脱内联css，或者更好；通过将其包含在css文件中。

您的数组已经有一个℃符号，我删除了它。

let data = ["0 &#8457", "31.2 &#8457", "-5 &#8451;", "36 &#8451;"];

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>

编辑：添加了“更改内容”按钮：）

第二次编辑：：添加了一个开关功能，该功能将添加/删除一个类，然后更改span的innerHTML（如果有该类）。

第三次编辑：拆分温度和单位。

Answer 2

好的，因此，如果我将温度刻度分成第三个数组元素，那么我认为以下方法可以工作。非常感谢，索迪梅尔！

编辑：创建第三个元素有点麻烦，因为必须在许多地方重新排列主代码，以在整个页面中容纳第三个可选元素，但是它可以正常工作，现在。

let array = ["0", "80.2", "&#8457;"]; // 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

这是分隔数值和度数符号的一种方法

Details

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;
}

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

3 个答案: