使用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";
        }
      });

  });