javascript - Javascript更改字体颜色

Question

我需要更改字体颜色。

我有以下内容：

   var clr="green";

    <font color=clr>' + onlineff + ' </font>

字体颜色不会变为绿色。只是想知道如何解决这个问题。

score 17 · Accepted Answer

考虑将您的标记更改为：

<span id="someId">onlineff</span>

然后你可以使用这个脚本：

var x = document.getElementById('someId');
x.style.color = '#00FF00';

在这里看到它：http: //jsfiddle.net/2ANmM/

score 7 · Accepted Answer

不要使用<font color=. 这是一种非常老式的文本样式设置方式，一些浏览器甚至不再支持它。

caniuse将其列为过时的，强烈建议不要使用该标签。MDN也是一样

不要使用这个元素！虽然曾经在 HTML 3.2 中规范化，但在 HTML 4.01 中已弃用，同时所有与样式相关的元素同时在 HTML5 中过时。

从 HTML 4 开始，HTML 不再传达样式信息（在元素或每个元素的样式属性之外）。对于任何新的 Web 开发，样式应该只使用 CSS 编写。

元素的前一种行为可以使用 CSS Fonts CSS 属性来实现，甚至更好地控制。

如果我们查看 4.01 标准的发布时间，我们会发现它是在 1999 年发布的

where was official deprecated，这意味着它仍然受支持，但不应再使用，因为它将在较新的标准中消失。

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

score 5 · Accepted Answer

html代码

<div id="coloredBy">
    Colored By Santa
</div>

javascript代码

document.getElementById("coloredBy").style.color = colorCode; // red or #ffffff

我认为这很容易使用

score 1 · Accepted Answer

试试这样：

var clr = 'green';
var html = '<font color="' + clr + '">' + onlineff + ' </font>';

话虽如此，您应该避免使用标签。现在已弃用。使用 CSS 更改标记中给定元素的样式（颜色）。

score 0 · Accepted Answer

您可以使用 HTML 标签在 JavaScript 上一行应用字体大小、字体颜色，也可以使用.fontcolor()定义颜色的.fontsize()方法、定义字体大小的.bold()方法、定义粗体的方法等。这些称为JavaScript内置函数。

以下是一些 JavaScript 内置函数的列表：

.big()
.small()
.italics() .fixed()
.strike()
.sup(
)
以下内置函数需要参数：

.fontsize() //eg: 要应用的数字大小.fontsize(4)

.fontcolor("") //eg: 要在字符串中应用的颜色.fontcolor("red")

.txt.link("") //eg: 可链接为字符串的url.link("www.test.com")

.toUpperCase() //eg: 转换成大写后应用于字符串.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 函数更改字体（颜色、大小、粗体）的示例：

vForm.message = "<HTML> Application Deadline was </HTML> " + "10/22/2018".fontcolor("red").fontsize(4).bold(); /* setting HTML font color, size, bold and combined them with JavaScript functions to change font color, size, bold in JavaScript code */

结果如下：

javascript - Javascript更改字体颜色

5 回答 5

Related

Reference