Javascript change font color

Question

I need to change the font color   I have the following      var clr  green         lt font color clr gt     onlineff      lt  font gt    The font color does not change to green  Just wondering how this could be fixed

User · Answer

Consider changing your markup to this    lt span id  someId  gt onlineff lt  span gt    Then you can use this script   var x   document getElementById  someId    x style color     00FF00     see it here  http   jsfiddle net 2ANmM

User · Answer

Try like this   var clr    green   var html     lt font color      clr      gt     onlineff      lt  font gt      This being said  you should avoid using the  lt font gt  tag  It is now deprecated  Use CSS to change the style  color  of a given element in your markup

User · Answer

Html code   lt div id  coloredBy  gt      Colored By Santa  lt  div gt    javascript code  document getElementById  coloredBy   style color   colorCode     red or  ffffff   I think this is very easy to use

User · Answer

Don t use  lt font color   It s a really old fashioned way to style text and some browsers even don t even support it anymore  caniuse lists it as obsolete  and strongly recommends not using the  lt font gt  tag  The same is with 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   If we look at when the 4 01 standard was published we see it was published in 1999  where  lt font gt  was officially deprecated  meaning it is still supported but shouldn t be used anymore as it will go away in the newer standard  And in the html5 standard released in August 2014 it was deemed obsolete and non conforming  To achieve the desired effect use spans and css   x000D   x000D  function givemecolor thecolor thetext        return   lt span style  color   thecolor    gt   thetext   lt  span gt      document write givemecolor  green   Hello  I m green     document write givemecolor  red   Hello  I m red     x000D  body     background   333    color   eee    x000D   x000D   x000D   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  Native   x000D   x000D  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     x000D  body    background   333   color   eee    x000D   lt h1 gt  some title  lt  h1 gt   lt div id  textholder  gt   lt  div gt   lt p gt  some other text  lt  p gt  x000D   x000D   x000D   jQuery  x000D   x000D  function givemecolor thecolor  thetext        var  span       lt span gt          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     x000D  body    background   333   color   eee    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt h1 gt  some title  lt  h1 gt   lt div id  textholder  gt   lt  div gt   lt p gt  some other text  lt  p gt  x000D   x000D   x000D

User · Answer

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    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       vForm message     lt HTML gt  lt font size   4 color    red  gt  lt b gt  Application   Deadline was  lt  b gt  lt  font gt  lt  HTML gt          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

[javascript] Javascript change font color

Examples related to javascript