有没有办法通过 UMAP iframe 中的 CSS 元素来 select？

Question

我正在我的网站上显示 uMap 地图。在这里：

<iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/fr/map/agroavenir_665397?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=none&captionBar=false"></iframe>

其实挺好看的，只是我很想改一下里面的CSS。在这里，我想将导航按钮替换到 bottom/right 除了 top/left 的角落：

如您所见，在第二张图片中，我已经能够在本地修改 CSS 只是为了查看可能的结果，而这正是我想要的！

但该元素实际上位于 iframe 文档中，通过它，我无法在我的 css 文件中访问我想要访问的元素。

有点郁闷不能把这种东西永久化，完美的展现在我面前...

有没有办法通过 CSS 选择器到达此 iframe 的内部？或者，通过其他方式，将那些元素移动到另一个角落？

感谢阅读

Answer 1

据我所知，使用 CSS 您只能 select 在同一个文档中类而 iframe 是一个全新的文档，所以答案是您可以't。也许你可以尝试用 javascript.

来定位它

代码示例：

document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';

来源：https://www.py4u.net/discuss/1050889

Answer 2

您可以使用以下代码在 iframe 中获取元素：

const iframe = document.querySelector(/**iframe selector**/)
iframe.contentWindow.document.querySelector(/**element selector**/)

然后用js做样式

有没有办法通过 UMAP iframe 中的 CSS 元素来 select？

Is there a way to select via CSS elements inside UMAP iframe?

javascript

css

iframe

google-maps

selector