格式化JavaScript中document.write()的输出
Formatting the output of document.write() in JavaScript
我创建了一个简单的计算器,它根据你在某门课上的得分告诉你你所获得的字母分数。然而,我要做的是格式化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条件返回'document.write(gradeA);'如果为真),然后使用我在网上找到的某些扩展来尝试修改变量。但是我无法让它输出我需要的内容
使用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>
使用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>
如果您真的想要使用document.write()
,您将需要创建具有style
或class
属性的元素。我不推荐这样做,因为它是不可扩展的,而且是非常糟糕的风格。
document.write("<div style='font-family:Arial''>hello</div>");
将div
写入文档,其字体为Arial
。
更好的方法是在HTML中使用<style>
,使用JavaScript创建<div>
元素,设置其属性,然后将其附加到文档中。
div.formatted{
font-family: Arial;
}
JS
var myDiv = document.createElement("div");
myDiv.innerHTML = "Hello";
myDiv.className = "formatted";
document.body.appendChild(myDiv);
相关文章:
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- 在JavaScript中输出转义字符
- 如何用更合适的内容替换document.write
- 如何在jQuery中将函数的输出分配给变量
- Javascript,输出结果后页面不断刷新
- jQuery AJAX write to XML
- Datetime格式为Friendly Time.Moment JS输出错误
- 如何将angularjs中的javascript字符串输出为循环数组
- 以XSL输出Javascript文档.write
- IE9中iFrame中的document.write没有输出
- 当我使用document.write函数在下面的代码中打印数字时,它会在每个输出的右侧插入0.为什么会发生这种事
- 调试时如何查看document.write的输出
- 格式化JavaScript中document.write()的输出
- 使用document.write()输出标记
- 代码不能运行,因为我不能在document.write中输出多个变量
- document.write中没有输出
- 在 document.write() 输出中使用换行符
- 为什么当我使用asp.net中的Response.Write()方法输出javascript代码时,页面中的css样式会
- 为什么控制台.log和 document.write 为相同的代码提供不同的输出
- 输出翻译,无需 document.write