當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS修改CSS的三种方式

發布時間：2025/6/15 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS修改CSS的三种方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<html> <head> <style type="text/css"> .newDiv { ????font-weight: bold; } </style> <script> function clk(event) { ????var parent = document.getElementById("parent"); ????? ????//改變className ????var child0 = document.createElement("div"); ????child0.innerHTML = "child0"; ????child0.className = "newDiv"; ????parent.appendChild(child0); ????//改變cssText ????var child1 = document.createElement("div"); ????child1.innerHTML = "child1"; ????child1.style.cssText = "font-weight: bold"; ????parent.appendChild(child1); ????//改變直接樣式 ????var child2 = document.createElement("div"); ????child2.innerHTML = "child2"; ????child2.style.fontWeight = "bold"; ????parent.appendChild(child2); } </script> </head> <body> <input type="button" value="click" onclick="clk(event);"/> <div id="parent"> ????<div>child</div> </div> </body> </html>

PS:

HTML DOM Style 對象http://www.w3school.com.cn/htmldom/dom_obj_style.asp

直接改變樣式時可參考以上鏈接

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JS修改CSS的三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。