在 JavaScript 中格式化 document.write() 的输出
Formatting the output of document.write() in JavaScript
我创建了一个简单的计算器,它会根据您在 class 中获得的分数告诉您您获得的字母等级。然而,我想要做的是格式化 document.write() 的文本。我不想简单地打印文本,而是希望它打印出具有特定大小字体的文本,网页中的特定背景颜色(就在 document.write() 的输出周围),我还想在生成的输出下划线.
<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() 中调用该变量(例如:假设我有一个变量 'gradeA' 然后将第一个 if 条件设置为 return 'document.write(gradeA);' if true) 然后使用我在网上找到的某些扩展来尝试修改变量。但是我无法让它输出我需要的东西。
使用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>
如果您真的想要使用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);
使用 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>
您可以应用您选择的样式等...
我创建了一个简单的计算器,它会根据您在 class 中获得的分数告诉您您获得的字母等级。然而,我想要做的是格式化 document.write() 的文本。我不想简单地打印文本,而是希望它打印出具有特定大小字体的文本,网页中的特定背景颜色(就在 document.write() 的输出周围),我还想在生成的输出下划线.
<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() 中调用该变量(例如:假设我有一个变量 'gradeA' 然后将第一个 if 条件设置为 return 'document.write(gradeA);' if true) 然后使用我在网上找到的某些扩展来尝试修改变量。但是我无法让它输出我需要的东西。
使用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>
如果您真的想要使用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);
使用 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>
您可以应用您选择的样式等...