Как изменить цвет всех абзацев (не заголовков) одним нажатием кнопки?

Question

Я использую JS и не могу заставить свою функцию работать.Я пытаюсь изменить цвет всех своих абзацев, используя кнопку щелчка, но я, кажется, не достигаю этого.Тем не менее, мне уже удалось изменить цвет фона с помощью той же кнопки.Это функция, которую я использовал для изменения цвета абзацев:

function color () {document.getElementById ("changecolor"). Style.color = "blue";};

Я также использовал идентификатор "changecolor" для всех своих абзацев, но он не работает.

Answer 1

Ваш код в порядке, кроме части Id.Просто замените 'getElementById' на 'getElementsByClassName' и присвойте всему абзацу общее имя класса.Для Ex ... class = 'common-абзац'.

Если вы дадите один и тот же идентификатор всем абзацам, он не будет работать, поскольку Id должен быть уникальным.Вы не получите никакой ошибки за это в HTML или JS.

Answer 2

Если вы хотите применить стиль ко всем тегам p , вы можете использовать getElementsByTagName javascript, чтобы выбрать все элементы данного имени тега.

Таким образом, ваш код javascript будет выглядеть следующим образом

        function color() {
        var paragraphs = document.getElementsByTagName("p");
        var i;
        for (i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.color = "blue";
        }
    };

В случае, если есть таблица стилей или сценарий, в котором уже применяется цветовой стиль, вы можете использовать ключевое слово javascripts! Important против вашего стиля... в этом случае код будет изменен следующим образом ..

        function color() {
        var paragraphs = document.getElementsByTagName("p");
        var i;
        for (i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style = "color: blue !important";
        }
    };

Чтобы применить к одному идентификатору, вы должны написать так

document.getElementById("changecolor").style = "color:blue !important;";

Обратите внимание, что атрибут id долженбыть уникальным для каждого документа DOM.Если вы примените один и тот же атрибут id к нескольким элементам, появится предупреждение, и document.getElementById ("") вернет первый элемент, соответствующий идентификатору.

Thanx.

Answer 3

Я также использовал идентификатор "changecolor" для всех своих абзацев, но он не работает.

Если вы пытаетесь изменить цвет фона всех абзацев, они должныбыть идентифицированным с использованием класса, а не идентификатора.Если вы попытаетесь изменить CSS чего-либо с помощью идентификатора, вы затронете только один из элементов на странице с этим идентификатором.Классы предназначены для многократного использования по всей странице, в отличие от идентификаторов, которые должны быть уникальными и, следовательно, используются только один раз.

Так что, если у вас есть группа абзацев под названием zalachenka например, они выглядят так:

<p class="zalachenka">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka">Here's my paragraph text where I want to change the background colour</p>

Вы можете использовать getElementsByClassName , чтобы найти все эти классы, но это сгенерирует массив результатов, и выпридется перебрать их, чтобы назначить цвета.Чтобы настроить таргетинг на первый элемент, вам нужно написать свой JavaScript-код следующим образом:

document.getElementsByClassName('zalachenka')[0].style.backgroundColor = 'blue'

Поскольку у вас их три (в приведенном выше примере), вам придется перебрать все из них.

const elems = document.getElementsByClassName('zalachenka') // returns array of elements.

for (let i = 0; i < elems.length; i++) {
    elems[i].style.backgroundColor = 'blue' // loops through the array and assigns the background color to each element.
}

Имейте в виду, это назначит CSS для встроенного тега.Когда процесс будет завершен, HTML будет выглядеть так:

<p class="zalachenka" style="background-color: red;">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka" style="background-color: red;">Here's my paragraph text where I want to change the background colour</p>
<p class="zalachenka" style="background-color: red;">Here's my paragraph text where I want to change the background colour</p>

Answer 4

вы можете использовать класс, так как идентификатор должен быть уникальным почему идентификатор должен быть уникальным .Также вы можете получить все элементы, используя getElementsByClassName .Который будет коллекцией, так что вы можете использовать для цикла и итерации по каждому элементу и изменить цвет.

Я надеюсь, что это решит проблему

function color() {
var elements = document.getElementsByClassName("changecolor");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.color = "blue";
    }
};

<p class="changecolor">First Paragraph</p>
<p class="changecolor">Second Paragraph</p>
<p class="changecolor">Third Paragraph</p>
<button onclick="color()">Changing Color Button</button>

Answer 5

Сначала вам нужно выбрать все элементы p

. Вы можете использовать

const ps = Array.from(document.querySelectorAll('p')) // string can be any CSS selector

или

const ps = Array.from(document.getElementsByTagName('p')) // might be a bit faster

, затем

for (let i = 0; i < ps.length; i++) {
  ps[i].style.color = 'green'
}

note:

let и const заменяют ключевое слово var , но вы можете избежать некоторых странных ошибок, вызванных var

note2:

большинство запросов HTML не возвращает ожидаемый тип,

<input type="number" > по-прежнему возвращает строку в качестве значения

и document.getElementsByTagName возвращает массив, похожий на объект, который выглядит следующим образом:

{length: 2, 0: foo, 1: bar}

Чтобы преобразовать его в массив, используйте Array.from (arrayLike)