我需要更改字体颜色。
我有以下内容：
var clr="green";
<font color=clr>' + onlineff + ' </font>
字体颜色没有变成绿色。想知道如何解决这个问题。
JavaScript更改字体颜色
4
字体颜色没有变成绿色。想知道如何解决这个问题。
- Nate Pet
1
5个回答
17
考虑将您的标记更改为以下内容：
<span id="someId">onlineff</span>
然后你可以使用这个脚本：
var x = document.getElementById('someId');
x.style.color = '#00FF00';
- MilkyWayJoe
8
请不要使用
<font color=。这是一种非常过时的文本样式方式，甚至有些浏览器已经不再支持它了。
caniuse将其列为过时，强烈建议不要使用<font>标签。MDN也是如此。
如果我们看一下4.01标准发布的时间，我们会发现它是在1999年发布的。不要使用这个元素！虽然在HTML 3.2中被规范化，但在HTML 4.01中被弃用，并与所有只涉及样式的元素同时被废除，在HTML5中被废弃。
从HTML 4开始，HTML不再传达样式信息（除了每个元素的style属性或style元素）。对于任何新的Web开发，样式应该仅使用CSS编写。
可以使用CSS Fonts CSS属性来实现元素以前的行为，并且可以更好地进行控制。
“<font>”已经正式弃用，这意味着它仍然受支持，但不应再使用，因为它将在新标准中被淘汰。
而在2014年8月发布的HTML5标准中，它被认为是过时和不符合规范的。
要实现所需的效果，请使用spans和CSS：
function givemecolor(thecolor,thetext)
{
return '<span style="color:'+thecolor+'">'+thetext+'</span>';
}
document.write(givemecolor('green',"Hello, I'm green"));
document.write(givemecolor('red',"Hello, I'm red"));body {
background: #333;
color: #eee;
}更新
这个问题和答案是来自2012年的，现在我不建议使用document.write，因为它需要在文档第一次渲染时执行。当时我使用了它，因为我假设OP希望以这种方式使用它。我建议使用更传统的方法，在您希望插入它们的位置插入您希望使用的自定义元素，而不依赖于文档渲染以及脚本执行的时间和位置。
本地：
function givemecolor(thecolor,thetext)
{
var span = document.createElement('span');
span.style.color = thecolor;
span.innerText = thetext;
return span;
}
var container = document.getElementById('textholder');
container.append(givemecolor('green', "Hello I'm green"));
container.append(givemecolor('red', "Hello I'm red"));body {
background: #333;
color: #eee;
}<h1> some title </h1>
<div id="textholder">
</div>
<p> some other text </p>jQuery
function givemecolor(thecolor, thetext)
{
var $span = $("<span>");
$span.css({color:thecolor});
$span.text(thetext);
return $span;
}
var $container = $('#textholder');
$container.append(givemecolor('green', "Hello I'm green"));
$container.append(givemecolor('red', "Hello I'm red"));body {
background: #333;
color: #eee;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> some title </h1>
<div id="textholder">
</div>
<p> some other text </p>- Tschallacka
1
@BenBarden 那是一个撇号。 - lmat - Reinstate Monica
5
Html 代码
<div id="coloredBy">
Colored By Santa
</div>
Javascript代码
document.getElementById("coloredBy").style.color = colorCode; // red or #ffffff
我认为这非常易于使用。
- Sandun Harshana
1
试试这样：
var clr = 'green';
var html = '<font color="' + clr + '">' + onlineff + ' </font>';
以上所述，您应避免使用
<font>标签。它已过时。请使用CSS来更改标记中给定元素的样式（颜色）。- Darin Dimitrov
2
它不是被弃用了，而是被删除了（也没有
color属性）。 - Explosion Pills0
你可以使用HTML标签来在JavaScript中一行代码中应用字体大小和字体颜色，同时你还可以使用.fontcolor()方法来定义颜色，.fontsize()方法来定义字体大小，.bold()方法来定义粗体等。这些被称为JavaScript内置函数 --> 字符串HTML包装器。
以下是一些JavaScript内置函数的列表：
.big() .small() .italics() .fixed() .strike() .sup()
以下是一些需要参数的内置函数：
.fontsize() //例如：要应用的大小为数字
以下是一些JavaScript内置函数的列表：
.big() .small() .italics() .fixed() .strike() .sup()
以下是一些需要参数的内置函数：
.fontsize() //例如：要应用的大小为数字
.fontsize(4)
.fontcolor("") //例如：要应用的颜色为字符串 .fontcolor("red")
.txt.link("") //例如：要链接的URL为字符串 .link("www.test.com")
.toUpperCase() //例如：要转换为大写的字符串 .toUpperCase()
记住语法是：string.functionName() 例如：
var txt = "Hello World!"; txt.bold();
这也可以在一行中完成：
var txt = "Hello World!".bold();
结果将是：Hello World!
您可以在一行中使用多个内置函数，将一个函数添加到另一个函数旁边。例如：
"10/22/2018".fontcolor("red").fontsize(4).bold()
以下是我在我的JavaScript代码中如何使用它来改变字体（颜色、大小、粗体），同时使用HTML标签和JavaScript函数的示例：
- S. Mayol
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
style属性来实现相同的效果。 - Fabrizio Calderan