如何使用单个变量（vanilla JS）更改多个元标记描述？

Question

我的网站上有以下元标记：

<meta name="description" content="content here" />
<meta itemprop="description" content="content here">
<meta property="og:description" content="content here" />

所有这 3 个元属性在我的网站上都是必需的。但是，有没有一种方法可以在我可以传递给每个内容属性的 JS 变量中引用单个描述？

Answer 1

您可以将 querySelector 与 meta[key=value] 一起使用，然后使用 setAttribute(key,value) 设置属性。

document.querySelector("meta[name='description'" ).setAttribute("content", "some new meta description");

document.querySelector("meta[itemprop='description'" ).setAttribute("content", "some new meta description");

document.querySelector("meta[property='description'" ).setAttribute("content", "some new meta description");

Answer 2

这是一个简单的方法

<meta class="meta" name="description" content="content here" />
<meta class="meta" itemprop="description" content="content here">
<meta class="meta" property="og:description" content="content here" />
<script>
    document.querySelectorAll(".meta").forEach((el) => {
        el.setAttribute("content", "your content");
    })
</script>

Answer 3

let text = 'hello world';


let Allmeta = document.querySelectorAll('meta');

Allmeta.forEach((meta) => {
    if (meta.getAttribute('name') == 'description' || meta.getAttribute('itemprop') == 'description' || meta.getAttribute('property') == 'og:description') {
        meta.setAttribute('content',text)
    }
});

如何使用单个变量（vanilla JS）更改多个元标记描述？

How to change multiple meta tag descriptions with a single variable (vanilla JS)?

javascript

meta-tags