Javascript 更改字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10982489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript change font color
提问by Nate Pet
I need to change the font color.
我需要更改字体颜色。
I have the following:
我有以下几点：
var clr="green";
<font color=clr>' + onlineff + ' </font>
The font color does not change to green. Just wondering how this could be fixed.
字体颜色不会变为绿色。只是想知道如何解决这个问题。
回答by MilkyWayJoe
Consider changing your markup to this:
考虑将您的标记更改为：
<span id="someId">onlineff</span>
Then you can use this script:
然后你可以使用这个脚本：
var x = document.getElementById('someId');
x.style.color = '#00FF00';
see it here: http://jsfiddle.net/2ANmM/
在这里看到它：http: //jsfiddle.net/2ANmM/
回答by Tschallacka
Don't use <font color=. It's a really old fashioned way to style text and some browsers even don't even support it anymore.
不要使用<font color=. 这是一种非常老式的文本样式方式，有些浏览器甚至不再支持它。
caniuselists it as obsolete, and strongly recommends not using the <font>tag. The same is with MDN
caniuse将其列为已过时，并强烈建议不要使用该<font>标签。与MDN相同
Do not use this element! Though once normalized in HTML 3.2, it was deprecated in HTML 4.01, at the same time as all elements related to styling only, then obsoleted in HTML5.
Starting with HTML 4, HTML does not convey styling information anymore (outside the element or the style attribute of each element). For any new web development, styling should be written using CSS only.
The former behavior of the element can be achieved, and even better controlled using the CSS Fonts CSS properties.
不要使用这个元素！虽然曾经在 HTML 3.2 中规范化，但在 HTML 4.01 中被弃用，同时所有元素仅与样式相关，然后在 HTML5 中废弃。
从 HTML 4 开始，HTML 不再传达样式信息（在元素或每个元素的样式属性之外）。对于任何新的 Web 开发，样式应仅使用 CSS 编写。
元素的前一个行为可以实现，甚至可以使用 CSS Fonts CSS 属性更好地控制。
If we look at when the 4.01 standard was published we see it was published in 1999
如果我们查看 4.01 标准的发布时间，我们会发现它是 1999 年发布的
where <font>was officially deprecated, meaning it is still supported but shouldn't be used anymore as it will go away in the newer standard.
where<font>已被正式弃用，这意味着它仍受支持但不应再使用，因为它将在较新的标准中消失。
And in the html5standard released in August 2014 it was deemed obsolete and non conforming.
在2014 年 8 月发布的html5标准中，它被视为过时且不符合标准。
To achieve the desired effect use spans and css:
要达到预期的效果，请使用 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;
}update
更新
This question and answer are from 2012 and now I wouldn't recommend using document.write as it needs to be executed when the document is rendered first time. I had used it back then because I assumed OP was wishing to use it in such a way. I'd recommend using a more conventional way to insert the custom elements you wish to use, at the place you wish to insert them, without relying on document rendering and when and where the script is executed.
这个问题和答案来自 2012 年，现在我不建议使用 document.write，因为它需要在第一次呈现文档时执行。我当时使用它是因为我认为 OP 希望以这种方式使用它。我建议使用更传统的方式在您希望插入的位置插入您希望使用的自定义元素，而不依赖于文档呈现以及脚本执行的时间和地点。
Native:
本国的：
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
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>回答by Sandun Harshana
Html code
html代码
<div id="coloredBy">
Colored By Santa
</div>
javascript code
javascript代码
document.getElementById("coloredBy").style.color = colorCode; // red or #ffffff
I think this is very easy to use
我认为这很容易使用
回答by Darin Dimitrov
Try like this:
像这样尝试：
var clr = 'green';
var html = '<font color="' + clr + '">' + onlineff + ' </font>';
This being said, you should avoid using the <font>tag. It is now deprecated. Use CSS to change the style (color) of a given element in your markup.
话虽如此，您应该避免使用<font>标签。现在已弃用。使用 CSS 更改标记中给定元素的样式（颜色）。
回答by S. Mayol
You can use the HTML tag in order to apply font size, font color in one line on JavaScript, as well as you can use .fontcolor()method to define color, .fontsize()method to define the font size, .bold()method to define bold, etc. These are called JavaScript Built-in Functions.
您可以使用 HTML 标签在 JavaScript 中在一行中应用字体大小、字体颜色，也可以使用.fontcolor()方法定义颜色、.fontsize()定义字体大小的.bold()方法、定义粗体的方法等。这些都称为JavaScript内置函数。
Here is a list of some JavaScript built-in functions:
.big()
.small()
.italics()
.fixed()
.strike()
.sup()The below built-in functions require parameters:
.fontsize() //e.g.: the size to be applied in number
.fontsize(4).fontcolor("") //e.g.: the color to be applied in string
.fontcolor("red").txt.link("") //e.g.: the url to be linkable as string
.link("www.test.com").toUpperCase() //e.g.: the converted to uppercase to be applied in string
.toUpperCase()Remember the syntax is:
string.functionName()e.g.:var txt = "Hello World!"; txt.bold();This also can be done in one line:
var txt = "Hello World!".bold();The result will be: Hello World!
You can use multiple built-in functions in one line, adding one next to the other. e.g.:
"10/22/2018".fontcolor("red").fontsize(4).bold()
The following is an example how I used it on my JavaScript code to change font (color, size, bold) using both HTML tags and JavaScript functions:
以下是一些 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><font size = 4 color = 'red'><b> Application Deadline was </b></font></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 */
vForm.message = "<HTML><font size = 4 color = 'red'><b> Application Deadline was </b></font></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 */
- Here is the result:
- 结果如下：
