JS如何操作class選擇器的樣式
阿新 • • 發佈：2018-08-17
知識 class選擇器 開始 col lec spa 可復用 原則 blue
在學習前端的知識的時候，發現使用JS無法操作class選擇器的樣式，剛開始還以為是js沒有設置，只有在jquery可以操作呢？
看了一些相關文章才清楚：
document.getElementsByClassName拿到的是數組並非某一個對象
var box = document.getElementsByClassName("box"); box.value; //返回undefined
1 var box = document.getElementsByClassName("box"); 2 box[0].value; //返回 box的內容
1 <!DOCTYPE html> 2<html> 3 <body> 4 5 <p id="p1">Hello World!</p> 6 <p class="p2">Hello World!</p> 7 8 <script> 9 document.getElementById("p1").style.color="blue"; 10 11 var sd=document.getElementsByClassName("p2"); 12 sd[0].style.color="red"; 13 sd[0].style.fontSize="30px";14 15 </script> 16 17 <p>上面的段落已被一段腳本修改。</p> 18 19 </body> 20 </html>
jquery的操作方式是$(classSelector)，獲取的是需要的那個對象
而我在使用JS忽略了最重要的class可復用，id不可復用原則。
所以js之前沒做getElementByClassName也是出於嚴謹的考慮，現在document.getElementsByClassName返回數組應該也是出於嚴謹的考慮。
JS如何操作class選擇器的樣式