是否可以一次更改网站上的所有锚标签属性?

问题描述

我最近了解到 target="_blank" 是易受攻击的，我们必须使用 rel="noopener".我正在开发一个网站项目，其中所有锚标记都使用目标属性.

I have recently learned that target="_blank" is vulnerable and we have to use rel="noopener". I am working on a website project where all anchor tags are using the target attribute.

只需使用以下命令即可一次更改这些锚文本的颜色:

It is possible to change the colors of these anchor texts at once just by using:

a {color: blue;}

在网站的头部.

但如果我尝试这样做

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

上面的代码没有任何作用.因为 CSS 没有涵盖 rel 和 target.

The above code does not have any effect. Because rel and target are not covered in CSS.

那么，如何才能为整个网站设置这些属性?

So how could someone set these attributes for the entire site?

另外，我尝试在 w3schools 上进行搜索，但他们在 CSS 中没有任何答案.

Also, I tried searching on w3schools but they don't have any answer to it in CSS.

推荐答案

使用 Vanilla JS 查找元素.循环然后更改属性.

Find elements using Vanilla JS. Loop then change attributes.

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

然后应用 CSS

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

这篇关于是否可以一次更改网站上的所有锚标签属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！