JS(JavaScript)是一門廣泛應用于web前端開發的編程語言。它可以添加多個CSS樣式,使網頁變得更加美觀、炫酷。下面就來看看如何通過JS添加多個CSS樣式。
首先,我們需要先創建一個CSS樣式表:
<style> .style1 { color: red; font-weight: bold; } .style2 { font-size: 20px; text-align: center; } </style>
接著,在JS代碼中,通過代碼獲取需要添加樣式的元素,然后使用element.classList來添加樣式。如下代碼所示:
var element = document.getElementById("id"); element.classList.add("style1"); element.classList.add("style2");
其中,id為需要添加樣式的元素的id,style1和style2為我們在CSS樣式表中定義的樣式類。
如果需要刪除某個樣式類,可以使用element.classList.remove()方法:
element.classList.remove("style1");
同時,我們還可以通過element.classList.toggle()方法來實現根據元素是否擁有某個樣式類來進行添加或刪除。如下代碼所示:
if (element.classList.contains("style1")) { element.classList.remove("style1"); } else { element.classList.add("style1"); }
通過上述代碼,我們可以方便地對元素添加或刪除多個CSS樣式,從而實現更加豐富的網頁效果。當然,在實際開發過程中,我們還需要注意兼容性和性能等方面的問題。
上一篇css里div圓角矩形
下一篇js文件的css樣式