可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I've created a simple calculator which tells you the letter-grade you earned based on the score you got in a class. What I'm trying to do, however, is format the text of document.write(). Instead of simply printing the text, I want it to print out text with a specific sized font, a specific background color within the webpage (just around the output of document.write()) and I also want to underline the output generated.

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

I've tired assigning the text within each document.write() to a particular variable, then calling that variable inside document.write() (example: say I have a variable 'gradeA' and then set the first if condition to return 'document.write(gradeA);' if true) and then using certain extensions I found online to try to modify the variable. But I wasn't able to get it to output what I needed.

回答1:

use css and tags...

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

回答2:

Use dev element to show result here are example code:

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

You can apply your choice of style etc...

回答3:

If you really want to use document.write(), you will need to create elements with style or class attributes. I don't recommend this as it is not extensible and really bad style.

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

Would write to the document a div whose font is Arial.

The better way to do this would be to use a <style> in your HTML, create a <div> element using JavaScript, set its attributes, and then append it into the document.

CSS

div.formatted{
    font-family: Arial;
}

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

Formatting the output of [removed]() in JavaScript

问题:

回答1:

回答2:

回答3:

收藏的人(0)

Formatting the output of [removed]() in JavaScript

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮