Question

我已经创建了一个简单的计算器，可以根据您在课堂上获得的分数告诉您所获得的字母等级。然而，我尝试做的是格式化document.write（）的文本。我不想简单地打印文本，而是希望它打印出具有特定大小字体的文本，网页中的特定背景颜色（就在document.write（）的输出周围），我还想强调生成的输出。 / p>

<html>
 <head><title>Letter-Grade Calculator</title></head>
 <body>
 <h3>Letter-Grade Calculator</h3>
  <script type="text/javascript">

     var score = parseFloat(prompt ("What is your score?"));

     if (score >= 90){
         document.write("The score you entered is: " + score + ". Your letter grade is: A!");
 }
     else if (score >= 80 && score <= 89.9){
         document.write("The score you entered is: " + score + ". Your letter grade is: B!");
 }
     else if (score >= 70 && score <= 79.9){
         document.write("The score you entered is: " + score + ". Your letter grade is: C!");
 }
     else if (score >= 60 && score <= 69.9){
         document.write("The score you entered is: " + score + ". Your letter grade is: D!");
 }
     else {
         document.write("The score you entered is: " + score + ". Your letter grade is: F!");
 }

  </script>
 </body>
</html>

我已经厌倦了将每个document.write（）中的文本分配给一个特定的变量，然后在document.write（）中调用该变量（例如：说我有一个变量＆＃39; gradeA＆＃39;然后设置第一个if条件返回＆＃39; document.write（gradeA）;＆＃39;如果为true）然后使用我在网上找到的某些扩展来尝试修改变量。但我无法将其输出到我需要的地方。

Answer 1

使用css和标签......

<html>
 <head><title>Letter-Grade Calculator</title></head>
 <body>
 <h3>Letter-Grade Calculator</h3>
 <style>
    .red {background: red;};
    .blue {background: blue;};
    .green {background: green;};
    .yellow {background: yellow;};
    .black {background: black;};
 </style>
  <script type="text/javascript">

     var score = parseFloat(prompt ("What is your score?"));

     if (score >= 90){
         document.write("<span class='red'>The score you entered is: " + score + ". Your letter grade is: A!</span>");
 }
     else if (score >= 80 && score <= 89.9){
         document.write("<span class='green'>The score you entered is: " + score + ". Your letter grade is: B!</span>");
 }
     else if (score >= 70 && score <= 79.9){
         document.write("<span class='blue'>The score you entered is: " + score + ". Your letter grade is: C!</span>");
 }
     else if (score >= 60 && score <= 69.9){
         document.write("<span class='yellow'>The score you entered is: " + score + ". Your letter grade is: D!</span>");
 }
     else {
         document.write("<span class='black'>The score you entered is: " + score + ". Your letter grade is: F!</span>");
 }

  </script>
 </body>
</html>

Answer 2

如果您确实想要使用document.write()，则需要创建具有style或class属性的元素。我不推荐这个，因为它不具有可扩展性和非常糟糕的风格。

document.write("<div style='font-family:Arial''>hello</div>");

将文档写入div，其字体为Arial。

更好的方法是在HTML中使用<style>，使用JavaScript创建<div>元素，设置其属性，然后将其附加到文档中。

<强> CSS

div.formatted{
    font-family: Arial;
}

<强> JS

var myDiv = document.createElement("div");
myDiv.innerHTML = "Hello";
myDiv.className = "formatted";
document.body.appendChild(myDiv);

Answer 3

使用dev元素显示结果这里是示例代码：

<html>
 <head><title>Letter-Grade Calculator</title></head>
 <body>
 <h3>Letter-Grade Calculator</h3>
 <div id="result"><div>
<script type="text/javascript">
    var score = parseFloat(prompt ("What is your score?"));
     if (score >= 90){
         document.getElementById('result').innerHTML = "The score you entered s: " + score + ". Your letter grade is: A!";
 }
     else if (score >= 80 && score <= 89.9){
         document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: B!";
 }
     else if (score >= 70 && score <= 79.9){
         document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: C!";
 }
     else if (score >= 60 && score <= 69.9){
         document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: D!";
 }
     else {
         document.getElementById('result').innerHTML = "The score you entered is: " + score + ". Your letter grade is: F!";
 }
</script>
 </body>
</html>

您可以选择风格等......

在JavaScript中格式化document.write（）的输出

3 个答案: