Изменение цвета фона текста в HTML с помощью JavaScript

#javascript #html

#javascript #HTML

Вопрос:

 <ul>
    <li>
        <span class="name">Tortilla de blé</span>
    </li>
</ul>

Это исходный код. Мне нужно изменить цвет фона только текста в теге.
Для этого я использовал свойство css background-color. Но это меняет цвет всего элемента списка.
я должен изменить цвет фона только с помощью javascript.

 var ea = document.getElementsByClassName('name');
for(var i = 0; i < ea.length; i  )
    ea[i].style.backgroundColor = "yellow";

(Изменен старый скрипт, поскольку он был неверным, ошибочно написан)

Мой результат:

Исходное изображение

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

Ожидаемое изображение

Я добился ожидаемого результата, отредактировав исходный код, как показано ниже:

 <ul>
    <li>
        <span class="name"><font style="bakground-color:yellow">Tortilla de blé</font></span>
    </li>
</ul>

Путем встраивания тега шрифта в текст, что невозможно с помощью JavaScript.
Я сделал это с помощью функции проверки элементов в Google Chrome

Ответ №1:

Ваш пример js недействителен и ничего не должен делать…

Вам нужно установить стиль для каждого элемента span;

 var ea = document.getElementsByClassName('name');
for(var i = 0; i < ea.length; i  )
        ea[i].style.backgroundColor = "yellow";

1. хорошо, но мне нужно выделить только текст, а не весь тег… возможно ли это?

2. Это будет; jsfiddle.net/pe4bn если только span не наследует стиль, который переопределяет его поведение по умолчанию, например, display:block

3. club-sandwich.net/recettes/tuna-wrap-256.php Проверьте эту страницу. Я создал свой пример с этой страницы.

4. Я пытаюсь выделить некоторый текст на веб-странице, которая относится к другому домену.

5. Установка «background: yellow;» <span> для элементов в инспекторе Chrome отлично работает на вашем club-sandwich.net страница — так что она также должна быть настроена в JavaScript.

Ответ №2:

Пробовал с помощью jQuery, http://jsfiddle.net/sameerast/gT9eh /

Ответ №3:

Как объяснено выше — ваш JS недействителен. Для начала имя функции ‘getElementsByClassName’, а не ‘getElementByClaassName’.

Затем вам нужно, чтобы он перебирал элементы и устанавливал их свойства по отдельности. jQuery предоставит вам хороший ярлык, описанный Sameera.

Ответ №4:

пример от Алекса К. :

из-за ошибки мне пришлось добавить 2 скобки :

 var ea = document.getElementsByClassName('name');
for(var i = 0; i < ea.length; i  )
        {ea[i].style.backgroundColor = "yellow";}