如何访问 <head> 元素中的元属性以确定是否注入一些 CSS？ [复制]答案

【问题标题】：How do I access a meta-property in the <head> element to determine whether or not to inject some CSS? [duplicate]如何访问 <head> 元素中的元属性以确定是否注入一些 CSS？ [复制]
【发布时间】：2020-09-17 10:21:31
【问题描述】：

我无权访问我被要求处理的网站的 HTML，但我可以通过网站构建工具上的自定义 Javascript 输入框插入 Javascript。

<meta property="og:url" content="https://www.whyottawa.ca/speakers/jeff-jeffrey/">

如果<head> 元素的上述行包含内容“https://www.whyottawa.ca/speakers/*”，我需要将一个元素设置为“display:none”，并使用 * 作为通配符。

我尝试过类似的东西

if (document.head.og:url.content === "https://www.whyottawa.ca/speakers/*") {
    document.getElementById('hide').style.display = "none";
};

但它不喜欢 og:url 属性中的“:”。有没有办法摆脱这种情况？还是更好的语法？

我还尝试了一个属性选择器，例如meta[content|="https://www.whyottawa.ca/speakers/"] 但我得到了错误，'ReferenceError: meta is not defined'

【问题讨论】：

那个元素已经被隐藏了，它是一个元标签。但是，您可以使用 javascript 将其删除。如果这是你想要的
关于你的脚本，你需要为它使用一个属性选择器。简单的点是行不通的。
感谢您的评论@AmitPandey 我将谷歌属性选择器。仅供参考，我要隐藏的元素不是元标记，它是页面主体中的一个 div。仅对于此示例，我们假设它的 id 为“hide”。

标签： javascript css css-selectors

【解决方案1】：

在这种情况下，您可以这样做。

document.getElementById("hide").style.display="none";

或者，如果您有一些其他属性或查询，您可以使用其他选择器。

document.querySelector("#hide").style.display="none";

属性选择器示例这里 name 是属性名称 hiddenElement 是值。

document.querySelector("#hide[name='hiddenElement'").style.display="none";

对于元标记属性选择器

document.querySelector("meta[property='og:url']").getAttribute('content')

【讨论】：

我是在手机上回答这个问题，所以可能有一些错别字，如果有问题请告诉我。
这没有回答关于如何根据来自meta 元素的信息更改值的问题。他们已经有了设置显示样式的代码。
在元标记上使用属性选择器.. document.querySelector("meta[property='og:url']").getAttribute('content')
正如@HereticMonkey 所说，这确实是我需要的答案的最后一部分。该属性选择器完美运行。谢谢