Использование 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, я хочу установить display на номер none для hfc-embed-container.

Возможно ли, что это возможно для меня в Javascript, или я должен пытаться идти другим путем? Спасибо за ваше время!

Answer 1

В вашем HTML несколько элементов имеют идентификаторы, содержащие дефисы. Хотя это верно для имен классов, это не для идентификаторов. Этот код будет найти правильные элементы и скрыть правильный, но обратите внимание, я изменил hfc-embed-container идентификатор hfcEmbedContainer в HTML:

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

    });