使用javascript更改元素樣式

-2

我正在處理我自己的某個項目，其中存在以下問題： - 我想將範圍的內容字體顏色更改爲紅色。使用javascript更改元素樣式

這是基於我認爲HTML

<html> 
    <head> 
     <title>Testing</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <script> 
      var arr = document.getElementsByClassName("change"); 
      console.log(arr); 
      console.log(arr.length); 
      var i; 

      for (i = 0; i <= arr.length; i++) { 
      console.log(arr[i]); 
      arr[i].style.color = red; 
      } 
     </script> 

    </head> 
    <body> 
     <div> 
      <p id="test">Something <span class="change">here</span></p> 
      <p id="test">Something <span class="change">there</span></p> 
      <p id="test">Something <span class="change">everywhere</span></p> 

     </div> 
    </body> 

</html>

，這應該工作。但是，這很奇怪。在console.log（arr）我在瀏覽器的控制檯中得到了HTML Collection []的輸入，這似乎把所有元素都保存得很好。

但是，使用arr.length給我0？我對自己犯了錯誤感到困惑，我敢肯定，這是一件簡單的事，我無法忍受。

幫助表示讚賞。提前致謝。

來源

2017-06-13 Nikola L.

'document.getElementsByClassName'實際上並不返回數組。它返回一個'HTMLCollection'。但在這種情況下，你可以，因爲'HTMLCollection'具有length屬性。我認爲你的腳本是在DOM完成解析之前運行的，所以當你詢問元素時，它們還沒有出現。將腳本塊移動到底部或等待DOMContentLoaded事件。 https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded 哦，還有什麼Kresimir說。 – Will

由於數組基於零，所以你不能做<=會成爲另一個錯誤。 – epascarello

它有更多的問題比找不到元素.... – epascarello

試試這個

<html> 
 
    <head> 
 
     <title>Testing</title> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body> 
 
     <div> 
 
      <p id="test">Something <span class="change">here</span></p> 
 
      <p id="test">Something <span class="change">there</span></p> 
 
      <p id="test">Something <span class="change">everywhere</span></p> 
 
     </div> 
 
     <script> 
 
      var arr = document.getElementsByClassName("change"); 
 
      var i; 
 
      for (i = 0; i < arr.length; i++) { 
 
      arr[i].setAttribute("style", "color: red"); 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

來源

2017-06-13 21:51:30 Zico

使用javascript更改元素樣式

回答

相關問題