如何定位这个 iframe CSS？答案

【问题标题】：How can I target this iframe CSS?如何定位这个 iframe CSS？
【发布时间】：2021-07-31 09:09:40
【问题描述】：

提前谢谢你。

我需要帮助更改此 iframe 的 CSS。

他们使用内联 !important 所以现在在我的 CSS 上我无法更改它，所以我需要使用 JavaScript，但我能找到的只是使用“document.getElementsById” - 但是，这个 iframe 的 ID 是随机生成的在每个页面加载时，无法定位此元素的 ID。

我能否以标题为目标，因为标题“聊天小部件”是唯一在此 iframe 上保持一致的内容。

谢谢

【问题讨论】：

请提供代码 sn-p 在问题正文中或您正在讨论的页面的链接（如果它是公开开放的）在此处的评论中。这将帮助其他人准确了解您想要实现的目标。
请提供minimal reproducible example好吗？
链接是coversandbags-uk.com 我需要向上移动聊天小部件。如果您检查 iframe 进行聊天，您会发现我的 bottom:50px 并没有覆盖 bottom:20px !important 内联。我需要帮助才能使用 .js 进行更改。

标签： javascript html css iframe

【解决方案1】：

语法：<iframe src="URL"></iframe> 有几种技术可以将 CSS 属性应用于 iframe <iframe src=”www.stackoverflow.com” style=”border: 2px dotted; width: 200px; height: 300px;”> </iframe>

您可以将内部 CSS 用于 HTML 文件中的 iframe 标记。您可以为 iframe 使用外部 CSS，它正在使用外部 CSS 文件。为 CSS 代码创建一个不同的文件，并在 iframe 标记之前使用 link 和 href 标记将其包含在 HTML 文件中。

【讨论】：

很确定他的意思不是手动编辑 CSS。他想通过添加 .css / .js 文件而不编辑 HTML 文件本身来编辑 CSS（因为他无权访问它，因为它是服务器渲染的）。现在添加一个.css文件不能推翻内联!important所以他正在考虑一个.js文件。
这绝对正确。 css 由服务器提供，我没有直接访问权限。我尝试在最后添加自己的 CSS，但正如 mmdts 解释的那样，!important 内联不允许我更改任何内容。 .js 似乎是我唯一的选择。