JS如何操作class選擇器的樣式


在學習前端的知識的時候,發現使用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返回數組應該也是出於嚴謹的考慮。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM