javascript, как изменить текст в span? Есть span Как в этом span поменять значение взятое из переменной javas
Только id по стандарту должен начинаться с буквы, а не цифры.
Мамаз Муткин
Илларион, да, прав, а если через jq — $(‘#1″).text(javas)
Амина Алипханова
Не согласен с лучшим ответом. Гораздо проще через JQuery:
$(‘#айди’).html(название переменной)
Людмила Малинина
Установить элементу текстовый контент:
1. document.getElementById(«1»).textContent = javas;
2. document.getElementById(«1»).innerText = javas;
Изменить html элемента:
document.getElementById(«1»).innerHTML = javas;
Тег span
Тег span позволяет выделить кусочек текста. Сам по себе тег ничего не делает, но в сочетании с атрибутами class , id или style позволяет обратиться через CSS к тексту, который находится внутри него (к примеру, для того, чтобы сменить цвет текста, его размер и так далее).
Пример
Давайте выделим кусочек текста с помощью тега span , но оставим его таким же, как и обычный текст (так как данному span не назначены CSS стили):
это текст внутри span
Пример
А сейчас давайте попробуем тегу span назначить красный цвет с помощью атрибута style :
это текст внутри span, а это — снаружи:)
Смотрите также
- тег div ,
который позволяет выделить целую группу тегов
HTML тег
Чтобы не задавать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для идентификации тега использовать атрибуты class или id с именем селектора.
Тег не оказывает никакое влияние на визуальное оформление элементов и не имеет семантического значения.
Синтаксис
Тег — парный, его содержимое пишется между открывающим () и закрывающим () тегами.
Пример
html> html> html> head> title>Заголовок документа title> head> body> p>У моей кошки span style="color: green;">зеленые span> глаза. p> body> html>Результат
В этом примере мы задали стиль непосредственно в теге.
Пример
html> html> head> title>Заголовок документа title> style> .letter < color: red; font-size: 300%; /* Размер шрифта в процентах */ position: relative; /* Относительное позиционирование */ top: 7px; /* Сдвиг сверху */ style> head> body> p>span class="letter">О span>на нанесла в руках отвратительные, тревожные желтые цветы. И эти цветы очень отчетливо выделялись на черном ее весеннем пальто. p> p>Михаил Булгаков p> body> html>Результат
В этом примере мы добавили к тегу атрибут class , и отдельно задали стили для содержимого тега.
Атрибуты
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега :
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега :
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Меняем текстовое содержимое элемента
Мы нашли нужный элемент и вывели в консоль его текстовое содержимое. Но для нашей задачи это содержимое нужно изменить. Как это сделать? Присвоим свойству textContent новое значение.
Возьмём абзац с текстом:
Здесь могла быть ваша реклама.
И перезапишем его текстовое содержимое:
let paragraph = document.querySelector('p'); paragraph.textContent = 'Здесь был Кекс. Мяу!';Обратите внимание, что строки с текстом нужно заключать в кавычки.
Когда инструкция выполнится, текст внутри абзаца изменится:
Здесь был Кекс. Мяу!
Когда мы присваиваем свойству textContent новое значение, оно полностью заменяет собой старое. Как и в случае с переключением классов, JavaScript не влияет на исходную разметку, а меняет текст прямо в браузере пользователя.
Свойство textContent предназначено только для текста, если записать туда HTML-теги, браузер их не поймёт.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
- script.js Сплит-режим