Как вывести текст в javascript

Поддержка браузеров

Синтаксис

Технические подробности

Дополнительные примеры

Демонстрация похожих методов:

var string = "Winter is here"; document.write("Оригинальная строка: " + string); document.write("
Большой: " + string.big() + "
"); document.write("
Маленький: " + string.small() + "
"); document.write("
Жирный: " + string.bold() + "
"); document.write("
Курсив: " + string.italics() + "
"); document.write("
Телетайп: " + string.fixed() + "
"); document.write("
Зачеркнутый: " + string.strike() + "
"); document.write("
Fontcolor: " + string.fontcolor("green") + "
"); document.write("
Fontsize: " + string.fontsize(6) + "
"); document.write("
Подстрочный: " + string.sub() + "
"); document.write("
Надстрочный: " + string.sup() + "
"); document.write("
Ссылка: " + string.link("https://www.w3schools.com") + "
"); document.write("
Мигающий: " + string.blink() + " (не работает в IE, Chrome, Firefox или Safari)
");

.inner Text

Читаем весь текст во вложенных элементах или записываем свой.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 6 октября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство inner Text позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента будет возвращена строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а так же содержимое тегов и .

Аналогичной функциональностью обладает свойство text Content , но он возвращает содержимое всех дочерних элементов, даже скрытых:

Пример

Скопировать ссылку «Пример» Скопировано

   Имя  Submit  form> label for='name'>Имяlabel> input type="text" id="name"> button type="submit" id="submit">Submitbutton> form>    Скопировать Скопировано Не удалось скопировать   

 const form = document.querySelector('form')const button = document.getElementById('submit') console.log(form.innerText)// "ИмяSubmit" button.innerText = 'Done!'console.log(button)// Done const form = document.querySelector('form') const button = document.getElementById('submit') console.log(form.innerText) // "ИмяSubmit" button.innerText = 'Done!' console.log(button) // Done    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Считывание и изменение текстового содержимого – довольно распространённая задача. inner Text позволяет считывать содержимое элемента и всего потомков, но с несколькими исключениями:

• не считывается содержимое тегов и ;
• не считывается содержимое скрытых элементов.

Свойство может изменять только текстовое содержимое элемента, если попытаться присвоить строку с HTML, она вставится как текст и не превратится в реальные DOM-элементы. Чтобы HTML в строке сработал, используйте inner H T M L .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство inner Text работает и как геттер, и как сеттер — обращение к свойству вернёт текстовое содержимое элементов и его потомков, а установка нового значения изменит все текстовое содержимое элемента.

Например, мы хотим изменить текст в блоке после окончания загрузки:

   Loading.  div id="loading-status"> Loading. div>    Скопировать Скопировано Не удалось скопировать   

 const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!' const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Data loaded!'    Скопировать Скопировано Не удалось скопировать   

В результате в браузере будет отображаться следующий HTML:

   Data loaded!  div id="loading-status"> Data loaded! div>    Скопировать Скопировано Не удалось скопировать   

Установка нового текста с помощью inner Text полностью удалит все старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.

Предположим, что в блоке статуса загрузки был ещё элемент отображающий иконку-лоадер.

   Loading.  div id="loading-status"> div class="fancy-loader">div> Loading. div>    Скопировать Скопировано Не удалось скопировать   

Установка нового значения в inner Text полностью удалит все предыдущее содержимое и перезапишет его новым текстом.

 const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!' const statusElement = document.getElementById('loading-status') statusElement.innerText = 'Error occurred!'    Скопировать Скопировано Не удалось скопировать   

После выполнения кода, внутри блока останется только текст:

   Error occurred!  div id="loading-status"> Error occurred! div>    Скопировать Скопировано Не удалось скопировать   

Как вывести текст в javascript

Наряду с геометрическими фигурами и изображениями canvas позволяет выводить текст. Доля этого вначале надо установить у контекста canvas свойство font :

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.font = "22px Verdana";

Свойство font в качестве значения принимает определение шрифта. В данном случае это шрифт Verdana высотой 22 пикселя. В качестве шрифтов используются стандартные шрифты.

Для вывода текста применяются два метода:

• fillText(text, x, y) : принимает три параметра: выводимый текст (параметр texte) и координаты точки, с которой выводится текст (параметры x и y).
• strokeText(text, x, y) : принимает аналогичные параметры.

Разница между двумя метода состоит в том, что fillText() использует цвет заполнения фигуры (из свойства fillStyle) и заполняет им символы текста. Метод strokeText() использует цвет контура фигуры (задается через свойство strokeStyle) и отрисосывает контур символов.

Например, выведем некоторый текст с помощью метода fillText() :

Метод fillText(text, x, y) принимает три параметра: выводимый текст и x и y координаты точки, с которой выводится текст.

Вывод аналогичного текста с помощью метода strokeText() :

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.font = "30px Verdana"; context.strokeStyle = "navy"; // устанавливаем цвет текста context.strokeText("Hello METANIT.COM", 20, 50);

Свойство textAlign

Свойство textAlign позволяет выровнить текст относительно одной из сторон. Это свойство может принимать следующие значения:

• left : текст начинается с указанной позиции
• right : текст завершается до указанной позиции
• center : текст располагается по центру относительно указанной позиции
• start : значение по умолчанию, текст начинается с указанной позиции
• end : текст завершается до указанной позиции

var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"); context.font = "22px Verdana"; context.textAlign = "right"; context.fillText("Right Text", 120, 30); context.textAlign = "left"; context.fillText("Left Text", 120, 60); context.textAlign = "center"; context.fillText("Center Text", 120, 90); context.textAlign = "start"; context.fillText("Start Text", 120, 120); context.textAlign = "end"; context.fillText("End Text", 120, 150);

Свойство textBaseline

Свойство textBaseline задает выравнивание текста по базовой линии. Оно может принимать следующие значения:

• top
• middle
• bottom
• alphabetic
• hanging
• ideographic

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.font = "22px Verdana"; context.textBaseline="top"; context.fillText("Top",10,100); context.textBaseline="bottom"; context.fillText("Bottom",45,100); context.textBaseline="middle"; context.fillText("Middle",130,100); context.textBaseline="alphabetic"; context.fillText("Alphabetic",205,100); context.textBaseline="hanging"; context.fillText("Hanging",320,100);

Определение ширины текста

С помощью метода measureText() можно определить ширину текста на canvase:

const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.font = "18px Verdana"; const text = context.measureText("Hello JavaScript"); console.log(text.width);