使用JavaScript更改页面上的CSS？

Question

我正在使用以下Javascript在我的网站上加载聊天框：

 window.HFCHAT_CONFIG = {
     EMBED_TOKEN: "XXXXX",
     ACCESS_TOKEN: "XXXXX",
     HOST_URL: "https://happyfoxchat.com",
     ASSETS_URL: "https://XXXXX.cloudfront.net/visitor"
 };

(function() {
  var scriptTag = document.createElement('script');
  scriptTag.type = 'text/javascript';
  scriptTag.async = true;
  scriptTag.src = window.HFCHAT_CONFIG.ASSETS_URL + '/js/widget-loader.js';

  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(scriptTag, s);
})();

这是我的页面上正在输出的HTML：

<div id="hfc-embed-container" style="display: block;">
    <div style="" id="hfc-cleanslate" class="hfc-chat-container">
      <div class="chat-template">
        <div id="hfc-badge" class="hfc-default-minimized-view hfc-page hfc-badge clearfix hfc-badge-bottom" style="background-color: rgb(255, 255, 255);">
          <div class="hfc-proactive-notification">
            <div class="hfc-proactive-message">Hi! This is a test message!</div>
          </div>

          <img alt="" class="hfc-badge-icon" id="hfc-badge-icon" src="https://d1l7z5ofrj6ab8.cloudfront.net/visitor/images/floating-widget-circle.png">
          <h2 class="hfc-badge-title" style="color: rgb(0, 0, 0);">Leave us a message!</h2><span class="hfc-unread"></span>
        </div>
    </div>
  </div>
</div>

因此，如果输出HTML中存在短语“给我们留言”，我想将hfc-embed-container display设置为none 。

这是我可以用Javascript做的事情还是应该尝试其他方法？ 谢谢你的时间！

Answer 1

在HTML中，几个元素的ID包含连字符。 虽然这对类名有效，但对ID无效。 这段代码将找到正确的元素并隐藏正确的元素，但是请注意，我在HTML中将hfc-embed-container ID更改为hfcEmbedContainer ：

  <div id="hfcEmbedContainer" style="display: block;">

然后，在加载DOM之后，您可以找到与之交互所需的元素并隐藏正确的元素：

  if (document.querySelector(".hfc-badge-title").innerHTML.indexOf("Leave us a message") > -1) {
    document.getElementById("hfcEmbedContainer").style.display = "none";
  }

同样，上面的if语句必须仅在加载DOM之后运行，因此要与之交互的元素实际上存在于DOM中。 假设某处有一个按钮可以激活消息对话框（称为btnLeaveMessage ），则可以将代码移到那里：

  window.addEventListener("DOMContentLoaded", function(){
    document.getElementById("btnLeaveMessage").addEventListener("click",    
      function(){
        if (document.querySelector(".hfc-badge-title").innerHTML.indexOf("Leave us a message") > -1) {
           document.getElementById("hfcEmbedContainer").style.display = "none";
        }
      });

  });