Как применить класс ко всем ссылкам на определенной странице с помощью JavaScript?

#javascript #css

Вопрос:

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

Как я могу этого достичь?

Я хочу только https://staging.startupdevkit.com/resource-library-version-1/ для изменения с помощью моего CSS-класса «стиль ссылок»

Я нашел ответ в другой аналогичной теме с этим:

document.querySelectorAll('a[href="' document.URL '"]').forE‌ach(function(elem){e‌lem.className = ' current-link')});

Я попробовал, возможно, неправильно, с этим:

document.querySelectorAll('a[href="'*https://staging.startupdevkit.com/resource-library-version-1/*'"]').forE‌ach(function(elem){e‌lem.className = 'link-style')});

Я делаю это неправильно, или я не использую правильное решение, или и то, и другое?

Заранее благодарю вас за вашу помощь!

1. дайте им общее className после этого document.querySelectorAll('.common-class').forEach((link) => { link.style.color = 'red' });

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

Ответ №1:

 const URL = "https://staging.startupdevkit.com/resource-library-version-1/";

document
    .querySelectorAll(`a[href="${URL}"]`)
    .forEach(element => element.classList.add('link-style'));

1. Спасибо вам за ваш ответ. Я попробовал это, но, к сожалению, не увидел никаких изменений, даже после очистки кэша моего сайта и браузера. У вас есть еще какие-нибудь предложения?

2.Нет причин, по которым это не сработает. Вы уверены href , что это именно https://staging.startupdevkit.com/resource-library-version-1/ тот атрибут?

3. Да, это точно то же самое. Может быть, это Элементар перекрывает его? Трудно сказать. Заглядываю под капот, чтобы попытаться увидеть, что может помешать.

Ответ №2:

попробуйте это

 [...document.querySelectorAll('a[href^="https://staging.startupdevkit.com/resource-library-version-1/"]')].forE‌ach(function(elem){e‌lem.classList.add('link-style')});

он проверяет все href, начиная с

 https://staging.startupdevkit.com/resource-library-version-1/