如何在 JavaScript 中定位 Font Awesome 5 svg 圖標？

Question

它在頁面加載后呈現，但我不知道如何定位它。 它被包裹在一個錨標記中，我嘗試將該錨標記的 z-index 設置為 9999，因此它位於圖標上方，我可以定位它，但它也不起作用。

 <nav class="menu">
        <div class="icon-list">
          <a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell"></i><span>Szolgáltatásaim</span></a>
          <a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
          <a class="highlight" href="#munkáim"
          ><i class="far fa-folder-open"></i><span>Munkáim</span></a>
        <a class="highlight" href="#oktatás">
        <i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
        <a class="highlight" href="#árak"
        ><i class="far fa-bookmark"></i><span>Árak</span></a >
          <a class="highlight" href="#marketing"
            ><i class="far fa-lightbulb"></i><span>Marketing</span></a>

          <a class="highlight" href="#üzenet"
            ><i class="far fa-envelope"></i><span>Üzenet</span></a>
          </div>
       </nav> 

Answer 1

我認為您的問題需要更多詳細信息，以便我們可以更好地幫助您。 話雖如此，如果您嘗試定位多個元素，請使用 class。 如果您嘗試定位一個特定元素，請使用 ID。 為此，您需要將此類屬性添加到 html 代碼中的<i>圖標中。 這是一個示例片段。 這是你需要的嗎？

 function changeAll() { var elements = document.querySelectorAll('.far,.fas'); // To target multiple elements use class for(var i = 0; i < elements.length; i++){ elements[i].style.color = "red"; } } function changeBell() { document.getElementById("bell").style.color = "green"; // To target one specific element use ID }

 <script async src="https://kit.fontawesome.com/0f49cf42f1.js" crossorigin="anonymous"></script> <nav class="menu"> <div class="icon-list"> <a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell" id="bell"></i><span>Szolgáltatásaim</span></a> <a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a> <a class="highlight" href="#munkáim"><i class="far fa-folder-open"></i><span>Munkáim</span></a> <a class="highlight" href="#oktatás"> <i class="fas fa-chalkboard"></i><span>Oktatás</span></a> <a class="highlight" href="#árak"><i class="far fa-bookmark"></i><span>Árak</span></a > <a class="highlight" href="#marketing" ><i class="far fa-lightbulb"></i><span>Marketing</span></a> <a class="highlight" href="#üzenet"><i class="far fa-envelope"></i><span>Üzenet</span></a> </div> </nav> <br> <button type="button" onclick="changeAll()">Change color of all icons</button> <br> <button type="button" onclick="changeBell()">Change color of bell only</button>