Можно ли сразу изменить все свойства тегов привязки на сайте?

Question

Я недавно узнал, что target="_blank" уязвим, и мы должны использовать rel="noopener". Я работаю над проектом веб-сайта, где все теги привязки используют атрибут target.

Можно сразу изменить цвета этих anchor texts, просто используя:

a {color: blue;}

в заголовке сайта.

Но если я попытаюсь сделать

a {
rel="noopener"
target ="_blank"
}

Приведенный выше код не имеет никакого эффекта. Поскольку rel и target не включены в CSS.

Так как кто-то может установить эти attributes для всего сайта?

Кроме того, я пробовал искать в w3schools, но они неУ меня нет ответа на этот вопрос в CSS.

Answer 1

Поиск элементов с использованием Vanilla JS. Цикл затем измените атрибуты.

document.querySelectorAll('a[target="_blank"]').forEach(function(el){
    el.setAttribute('rel', 'noopener');
});

Затем примените CSS

a[target ="_blank"][rel="noopener"] {
    color: blue;
}

Answer 2

Вам понадобится JS.

document.querySelectorAll("a").forEach(a => {
   a.setAttribute("rel", "noopener");
   a.setAttribute("target", "_blank");
});