代码之家 › 专栏 › 技术社区 › Millhorn

如何用一个变量(vanillaJS)更改多个元标签描述?

meta-tags javascript

Millhorn · 技术社区 · 5 年前

我的网站上有以下元标签:

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

所有这3个元属性在我的网站上都是必要的。然而,有没有一种方法可以引用JS变量中的单个描述,我可以将其传递给这些内容属性中的每一个?

3 回复 | 直到 5 年前

Maik Lowrey 5 年前

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

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");

dev61057 5 年前

这里有一个简单的方法

<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>

Mustak Ahmed Khan 5 年前

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)
    }
});

推荐文章

Ubaidullah MS · 如何使用php在url中获取元标记

8 年前

Mik3NL · 标题中未显示元标记

8 年前

Andy · 每页插入元标记

8 年前

Walter · Facebook链接预览中的作者姓名未显示

9 年前

RMS · Meta-viewport标记user-scalible=在Android 6.0+、Chrome版本53中不忽略?

10 年前

AMT · 错误:无法从EmberCLI中的meta标记读取配置

10 年前

Manel · 如何覆盖html中现有的元标记?

10 年前

aiddev · 在哪里更改linkedin摘要中的图像

11 年前

Ragesh P Raju · Webclent和WebBrowser中的HTML源不同

12 年前

Adrian · 页面标题和tt_news类别标题中的TYPO3标题标记

12 年前