Javascript как изменить цвет текста

Метод fontcolor() создаёт HTML-элемент , заставляющий строку отображаться шрифтом указанного цвета.

Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Сводка

Метод fontcolor() создаёт HTML-элемент <font>, заставляющий строку отображаться шрифтом указанного цвета.

Примечание: Примечание по использованию: элемент <font> был удалён из HTML5 (en-US) и больше не должен использоваться. Вместо него веб-разработчикам следует использовать свойства CSS.

Синтаксис

Параметры

color

Строка, выражающая цвет в виде шестнадцатеричного триплета RGB, либо в виде названия цвета. Названия цветов перечислены в справочнике по значению цвета в CSS.

Описание

Если вы выразили цвет в виде шестнадцатеричного триплета RGB, вы должны использовать формат rrggbb. Например, шестнадцатеричные значения RGB для оранжево-розового цвета такие: красный=FA, зелёный=80 и синий=72, так что RGB-триплет для оранжево-розового цвета будет следующим "FA8072".

Примеры

Пример: использование метода fontcolor()

В следующем примере метод fontcolor() используется для изменения цвета строки путём генерирования строки с HTML-тегом <font>.

var worldString = 'Привет, мир';

console.log(worldString.fontcolor('red') +  ' на этой строке красный');
// '<font color="red">Привет, мир</font> на этой строке красный'

console.log(worldString.fontcolor('FF00') + ' на этой строке красный в шестнадцатеричной форме');
// '<font color="FF00">Привет, мир</font> на этой строке красный в шестнадцатеричной форме'

При помощи объекта element.style (en-US) вы можете получить значение атрибута style элемента и управлять им более обобщённым способом, например:

document.getElementById('yourElemId').style.color = 'red';

Спецификации

Спецификация Статус Комментарии
ECMAScript 2015 (6th Edition, ECMA-262)
Определение ‘String.prototype.fontcolor’ в этой спецификации.		 Стандарт Изначальное определение. Реализована в JavaScript 1.0. Определена в (нормативном) Приложении B по Дополнительным возможностям ECMAScript для веб-браузеров.

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Источник

This tutorial teaches us to change the font color of the text using JavaScript. While working with JavaScript and developing the frontend of the application, it needs to change the font color of the text using JavaScript when an event occurs.

For example, we have an application which can turn on or off the device. We have a button to turn on or off the device. When the device is on, make the button text green. Otherwise, make the button text red.

So, in such cases, programmers need to change the font color using JavaScript. We have some different method to overcome the problem at below.

Access the Element and Change the Style

In this section, we will access the element by id or class name using JavaScript. Users can change the style of the element using the .style property. Also, we can change the specific style, such as element color, background color, size, etc.

In our case, we will change the color attribute values to change the font color. Users can follow the below syntax to change the font color using JavaScript.

Syntax

let element = document.getElementById(' element_id ');
element.style.color = colorCode;

Parameters

  • colorName − It is the new color, which users want to apply to the text. It can be color name, color’s hexadecimal code, or RGB values.

Example

In the below example, we have created a button. When the user clicks on that button, we will call a function named changeFontColor(). Inside the function, we are accessing the button element using its id and changing the color using the color attribute of its style

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div id = "fonts"> Click the button to change the color of font inside the button.</div>
   <button onclick = "changeFontColor()" id = "btn" >change color</button>
   <script>
 
      
      function changeFontColor() {
         let button = document.getElementById("btn"); 
         let color = button.style.color;
         if (color == "red") { 
            button.style.color = 'green';
         } else {
            button.style.color = 'red';
         }
      }
   </script>
</body>
</html>

When users will click on the ‘change color’ button, it will toggle the button color between green and red.

Change the color of all text

In this section, we will learn to change the color of all body text. You can consider the scenario. When we apply the dark or light theme to the application, it is not good practice to change the color of every element one by one. Rather, we can change the color of all body text with just a single click.

Users can follow the syntax below to change the body text’s font color.

Syntax

document.body.style.color = color

Example

In the below example, we will change the color of the all body text, instead of changing the text of the particular element.

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
      body {
         color: blue;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div id = "fonts"> Click the button to change the color of font of the whole body</div>
   <button onclick = "changeFontColor()" id = "btn">change color</button>
   <script>
      
      
      function changeFontColor() {

         
         let color = document.body.style.color;
         if (color == "blue") {
            document.body.style.color = 'pink';
         } else {
            document.body.style.color = 'blue';
         }
      }
   </script>
</body>
</html>

When user clicks on the button, it will change the color of all text between pink and blue.

Use the String fontcolor() Method

In this section, we will learn about the fontcolor() method. We can apply the fontcolor() method on any text string, and it returns the <font> HTML element with the color attribute.

Users can follow the below syntax to use the fontcolor() method.

Syntax

let text = "some text";
text.fontcolor("color");

Parameters

  • color − It is a color code or color name

Return values

  • The fontcolor() method returns the <font> HTML element.

<font color="color"> some text </font>

Example

In the below example, we will change the color of a particular string using String fontcolor() method.

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div> Click the button to change the color of below text using <i>
   fontcolor() </i> method.</div>
   <div id="fonts"> hello world!</div>
   <button onclick = "changeFontColor()" id = "btn">change color</button>
   <script>

      
      function changeFontColor() {
         let fontsDiv = document.getElementById("fonts");
         let string = "hello world";
         fontsDiv.innerHTML = string.fontcolor("green");
      }
</script>
</body>
</html>

In the output, users can observe that when they clicks the button, font of the “hello world” changes to the green.

In this tutorial, we have learned to change the all text of the body with a single click. Also, we learned to change the color of the text of a single element using the style attribute of the element. In the last section, we have learned about the fontcolor() method which is deprecated so it is not recommended to use.

Источник

How to change the text color in JavaScript:

In this post, we will learn how to change the color of a text in JavaScript. We will create one small html-css-js project, that will contain only one button and clicking on that button will change the color of a text.

Property to change:

We need to change the color property of a component. In this example, we will change the color of a p or paragraph component.

Example program:

Create one index.html file with the below content:

<!DOCTYPE html>
<html>

<head>
    <title>Change Color in JS</title>
</head>

<body>
    <button id="toBlue">Blue</button>
    <button id="toGreen">Green</button>
    <button id="toRed">Red</button>
    <div>
        <p id="output_text">Click the button to change the color.</p>
    </div>
    <script>

        document.getElementById("toBlue").onclick = function () {
            document.getElementById("output_text").style.color = 'blue';
        }

        document.getElementById("toGreen").onclick = function () {
            document.getElementById("output_text").style.color = 'green';
        }

        document.getElementById("toRed").onclick = function () {
            document.getElementById("output_text").style.color = '#FF0000';
        }

    </script>
</body>

</html>

Output:

Open this file in your favorite browser. It will show one text line with three buttons as like below:

js change text color

If you click on any of these buttons, it will change the color of the text.

Explanation:

Here,

  • The script tag holds the javascript part.
  • Each button has one id. All are different. Using document.getElementbyId in the JavaScript, we are accessing a specific button and we are adding one onclick listener. It means the function will be run if the user clicks on that element.
  • Now, inside the function, we are changing the color of the text. The text or p component also has one id. We are changing the style.color of the p component inside each function.
  • Each function invocation changes the color differently. We can pass the color names, or we can pass the hex value. Not all colors are defined, and the browser will not understand every name. So, it is a good practice to pass hexadecimal value instead of its name.

You might also like:

  • Example of JavaScript reduce with an array of objects
  • JavaScript setDate function explanation with example
  • JavaScript program to read the current date time
  • JavaScript program to find the sum of all even numbers below a given number
  • JavaScript program to find the lcm of two numbers
  • Different index related methods in JavaScript array
Источник

Понравилась статья? Поделить с друзьями:
  • Javascript как изменить текст ссылки
  • Javascript как изменить стиль текста
  • Javascript как изменить стиль css для элемента
  • Javascript как изменить свойство класса
  • Javascript как изменить код


    • © 2024 Исправление ошибок и поиск оптимальных решений проблем
    Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению. Часть материалов предоставлена пользователями и посетителями сайта. Администрация не несет ответственности за их содержание.