如何强制隐藏在我的页面上呈现的div？

Question

我在我的网页上整合了tlk.io聊天API

对于要求，我的目标是隐藏该标题栏，并保留其余部分。

我使用谷歌Chrome工具进行检查，我得到了这个：

我也抓住了这个

<header id="header" class="header">
  <div class="header-bar">
      <a class="header-avatar" href="http://tlk.io">tlk.io</a>
    <span id="channel" class="header-channel">keystone</span>
    <span class="header-status is-hidden" title="Online"></span>
  </div>
</header>

我已尝试CSS

       <style type="text/css">
        #header.header-bar{
          display: none;
        }

        </style>

JS

<script>
$('#header.header').hide();
console.log('Run');
</script> 

我在控制台上显示了run这个词，但那个横幅仍在那里。

任何提示？我做错了什么 ？它甚至可以吗？

Answer 1

tlk.io嵌入代码似乎使用iframe。

由于same-origin policy，您将无法影响其内容。

编辑：看起来就像他们让你通过他们的嵌入工具注入自定义CSS文件一样。使用它来更改界面或删除他们的品牌可能会让你关闭。